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
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;
});
});
});
Thank you for the reply,
Dear
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
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
thank you, Natalia
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
I am so grateful. Thank you so, so much
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.