Lighthouse Studio
LJ
Lawrence Joseph
 · Posted in Lighthouse Studio

Constant Sum Scale - Showing Percentage Symbol to the numeric input box

Hello,

I attempted several approaches to include a percentage symbol in the constant sum scale question. Each approach has its own issues. Personally, I prefer the outcome of script 3, and it would be fantastic if we could have the ability to add multiple percentage symbols. Kindly review the following three scripts and provide your insights. Previously, I sought input from Support, but currently, they don't have the most skilled coders available. Therefore, I am reaching out to the forum for your input.

Note: I have successfully implemented the first approach using the grid question. Now, I am attempting to customize a native constant sum scale question using any of these scripts.

Script 1: I took the below code from our forum and it adds a percentage symbol below the numeric text box. Question: I believe there will be two columns. How to control the column width of the constant sum scale? So that I can bring the percentage symbol to the right of the input box.

<script>
$(document).ready(function(){
$('input[id^="[% QuestionName() %]_"]').after('%');
})
</script>

Script 2: The below script adds a percentage symbol next to the number.  However, editing/modifying the number is a bit difficult as the ‘backspace’ key not working from right to left. Also, the percentage symbol not appearing for the Total where I have used input ID as 'MissionResources_total'.

<script>
$(document).ready(function(){
$("input[name='MissionResources_1']").on('input', function() {
    $(this).val(function(i, v) {
     return v.replace('%','') + '%';  });
    });
});
</script>

Note: Similarly, I recreated code for other input boxes.

Script 3: The below script adds a percentage symbol and editing/modifying the number within the cell is easier. The issue is it adds multiple percentage signs for multiple keystrokes. And for Total, it adds a percentage symbol when the keystroke happens.

<script>
var input1 = document.getElementById('MissionResources_1');

input1.addEventListener('blur', function () { 
  input1.value += '%';
});

input1.addEventListener('keydown', function () { 
  rente.value = rente.value.replace('%', '')  //This simply removes the "%" when you start typing again
});
</script>

Note: Similarly, I recreated code for other input boxes.

Thanks,
Lawrence

Resolved
3 replies