I need to add pop-up french characters | XM Community
Solved

I need to add pop-up french characters

  • 27 October 2023
  • 14 replies
  • 99 views
N
Rank
Userlevel 3
Badge +3

Hello, I have a project where the user has to enter french text. I need a a set of French special letters to popup. I have tried https://www.codehim.com/demo/jquery-special-characters-input/ but it didn’t work:( The css is off, but the most important, if I press the letter, it doesn’t go into the text field. Do you have any suggestions?
this is my survey: https://brown.co1.qualtrics.com/jfe/form/SV_3JcmoQLaTCANB4i

icon

Best answer by Deepak 30 October 2023, 07:01

View original

14 replies

Michael_Cooksey
Rank
Userlevel 7
Badge +32

@ElieD as a Francophone XM Community member, do you happen to have any suggestions on this one? 

Deepak
Rank
Userlevel 7
Badge +36

@nonufrie 

Try this:

Qualtrics.SurveyEngine.addOnload(function() {
    var button = document.createElement("button");
    button.innerHTML = "French Special Letters";
    document.querySelector("#" + this.questionId + " .QuestionBody").appendChild(button);
    var dialog = document.createElement("div");
    dialog.id = "specialCharsDialog";
    dialog.title = "French Special Letters";
    dialog.style.display = "none";

    var specialChars = ['à', 'â', 'æ', 'ç', 'é', 'è', 'ê', 'ë', 'î', 'ï', 'ô', 'œ', 'ù', 'û', 'ü'];
    specialChars.forEach(function(char) {
        var specialButton = document.createElement("button");
        specialButton.classList.add("specialChar");
        specialButton.innerHTML = char;
        dialog.appendChild(specialButton);
    });

    document.querySelector("#" + this.questionId + " .QuestionBody").appendChild(dialog);

    var isDialogVisible = false;

    button.addEventListener("click", function() {
        if (!isDialogVisible) {
            document.getElementById("specialCharsDialog").style.display = "block";
        } else {
            document.getElementById("specialCharsDialog").style.display = "none";
        }
        isDialogVisible = !isDialogVisible; // Toggle the display status
    });

    var specialCharButtons = document.querySelectorAll("#" + this.questionId + " .specialChar");
    specialCharButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            var char = button.innerHTML;
            var inputField = document.querySelector(".InputText");
            var currentText = inputField.value;
            inputField.value = currentText + char;
        });
    });
});

 

ElieD
Rank
Userlevel 6
Badge +37

@Michael_Cooksey : Thanks you for thinking of me, but my team and my respondents use a french keyboard, so I never had this kind of issue ^^

 

@Deepak response is the best one, as my opinion

 

@nonufrie : I want to say I like your system to offers non standard characters cause it can be useful for any other languages and it’s very user friendly !

 

 

N
Rank
Userlevel 3
Badge +3

@Deepak thank you so much for your help! It worked!

Michael_Cooksey
Rank
Userlevel 7
Badge +32

@Michael_Cooksey : Thanks you for thinking of me, but my team and my respondents use a french keyboard, so I never had this kind of issue ^^

 

@Deepak response is the best one, as my opinion

 

@nonufrie : I want to say I like your system to offers non standard characters cause it can be useful for any other languages and it’s very user friendly !

 

 

Thank you for the reply, @ElieD! 

Michael_Cooksey
Rank
Userlevel 7
Badge +32

@Deepak, thank you so much for solving this issue! 💜

N
Rank
Userlevel 3
Badge +3

Dear @Deepak how would I need to change the function if I want to store it on the external  server, and then add to <header> and call something like

Qualtrics.SurveyEngine.addOnload(function() {
Query("#"+this.questionId).frenchspecialinput();

});

The thing is that I need to add it to 22 fields, and it would be great to keep it in one place.

 

thank you again, Natalia

Deepak
Rank
Userlevel 7
Badge +36

Dear @Deepak how would I need to change the function if I want to store it on the external  server, and then add to <header> and call something like

Qualtrics.SurveyEngine.addOnload(function() {
Query("#"+this.questionId).frenchspecialinput();

});

The thing is that I need to add it to 22 fields, and it would be great to keep it in one place.

 

thank you again, Natalia

Add below in Header 

<script>
(function($) {
    $.fn.frenchspecialinput = function() {
        return this.each(function() {
            var button = document.createElement("button");
            button.innerHTML = "French Special Letters";
            $(this).find('.QuestionBody').append(button);
            var dialog = document.createElement("div");
            dialog.id = "specialCharsDialog";
            dialog.title = "French Special Letters";
            dialog.style.display = "none";

            var specialChars = ['à', 'â', 'æ', 'ç', 'é', 'è', 'ê', 'ë', 'î', 'ï', 'ô', 'œ', 'ù', 'û', 'ü'];
            specialChars.forEach(function(char) {
                var specialButton = document.createElement("button");
                specialButton.classList.add("specialChar");
                specialButton.innerHTML = char;
                dialog.appendChild(specialButton);
            });

            $(this).find('.QuestionBody').append(dialog);

            var isDialogVisible = false;

            $(button).on("click", function() {
                if (!isDialogVisible) {
                    $("#specialCharsDialog").css("display", "block");
                } else {
                    $("#specialCharsDialog").css("display", "none");
                }
                isDialogVisible = !isDialogVisible; // Toggle the display status
            });

            var specialCharButtons = $(this).find('.specialChar');
            specialCharButtons.each(function() {
                $(this).on("click", function() {
                    var char = $(this).text();
                    var inputField = $('.InputText');
                    var currentText = inputField.val();
                    inputField.val(currentText + char);
                });
            });
        });
    };
})(jQuery);
</script>

You can then use in each questions:
 

Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId).frenchspecialinput();
​​​​​​​});

Hope it helps!

N
Rank
Userlevel 3
Badge +3

Amazing! Thank you so, so much.

 

Natalia

N
Rank
Userlevel 3
Badge +3

Dear @Deepak I wonder if you can help me on this again. The script works perfectly when I have one question per page. But at the last page, they want to have an overview of all answers on one page, with the ability to fix the answer- so I need that French special character thing under each field! Is it possible to modify your function so that would work? I have tried to add

 

thank you, Natalia

 

Deepak
Rank
Userlevel 7
Badge +36

@nonufrie 

I understand the issue I think updating it to below code should resolve the issue.

<script>
(function($) {
    $.fn.frenchspecialinput = function() {
        return this.each(function() {
            var $questionContainer = $(this);
            var button = document.createElement("button");
            button.innerHTML = "French Special Letters";
            $questionContainer.find('.QuestionBody').append(button);
            var dialog = document.createElement("div");
            dialog.id = "specialCharsDialog";
            dialog.title = "French Special Letters";
            dialog.style.display = "none";

            var specialChars = ['à', 'â', 'æ', 'ç', 'é', 'è', 'ê', 'ë', 'î', 'ï', 'ô', 'œ', 'ù', 'û', 'ü'];
            specialChars.forEach(function(char) {
                var specialButton = document.createElement("button");
                specialButton.classList.add("specialChar");
                specialButton.innerHTML = char;
                dialog.appendChild(specialButton);
            });

            $questionContainer.find('.QuestionBody').append(dialog);

            var isDialogVisible = false;

            $(button).on("click", function() {
                if (!isDialogVisible) {
                    $questionContainer.find("#specialCharsDialog").css("display", "block");
                } else {
                    $questionContainer.find("#specialCharsDialog").css("display", "none");
                }
                isDialogVisible = !isDialogVisible; // Toggle the display status
            });

            var specialCharButtons = $questionContainer.find('.specialChar');
            specialCharButtons.each(function() {
                $(this).on("click", function() {
                    var char = $(this).text();
                    var inputField = $questionContainer.find('.InputText');
                    var currentText = inputField.val();
                    inputField.val(currentText + char);
                });
            });
        });
    };
})(jQuery);
</script>

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId).frenchspecialinput();
});
Hope it helps

N
Rank
Userlevel 3
Badge +3

@Deepak thank you so much for looking into this. Unfortunately, the the French characters are being created always after the first “French Special Letters” button, no matter which one did I press
 

I have pressed the second button, but the characters are appended to the first one 

 

Deepak
Rank
Userlevel 7
Badge +36

@nonufrie It did work for me not sure where you are finding the error.

N
Rank
Userlevel 3
Badge +3

@Deepak you are absolutely right! It was my bad.Instead of copy and paste the whole blob I tried replace certain lines and obviously missed some. 
I am so grateful. Thank you so, so much @Deepak .

Leave a Reply


Terms & Conditions