I need to add pop-up french characters | XM Community
Skip to main content

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

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


@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;
});
});
});

 


@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 !

 

 


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


@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


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


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


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 = r'à', 'â', 'æ', 'ç', 'é', 'è', 'ê', 'ë', 'î', 'ï', 'ô', 'œ', 'ù', 'û', 'ü'];
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!


Amazing! Thank you so, so much.

 

Natalia


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

 


@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


@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 

 


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


@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