Forced response on form_multiple_choice with OSWeb

Comments

• Fab

  April 2 edited April 2

  Hi @b_lanzini,

  To achieve what you're after, I'd move away from the already-made form_multiple_choice object amd use straight HTM and javascript code inside an inline_html object.

  Let's imagine that these are your MCQs:

  

  I'd use this structure:

  

  And code like this inside the inline_html object:

  
  

  <form id="myForm">
   <p id="question"></p>
   <div id="optionsContainer"></div>
   <br>
   <!-- The submit input (OK button) will be named based on vars.QuestionID -->
   <input type="submit" value="OK" id="okButton" disabled>
  </form>
  
  <script>
   (function() {
    // Populate the question text from vars.question
    document.getElementById('question').textContent = vars.question;
  
    // Set the OK button's name attribute to the QuestionID value
    document.getElementById('okButton').setAttribute('name', vars.QuestionID);
  
    // Array of option variable names to loop over
    const optionNames = ['optionA', 'optionB', 'optionC', 'optionD'];
    const optionsContainer = document.getElementById('optionsContainer');
  
    // Loop through each option variable and create a checkbox input with a label
    optionNames.forEach(function(optionName) {
     // Create a label element for styling and grouping
     const label = document.createElement('label');
  
     // Create the checkbox input element
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.name = 'option';
     // Set the checkbox value from the corresponding OSWeb variable value
     checkbox.value = vars[optionName];
  
     // Append the checkbox to the label
     label.appendChild(checkbox);
  
     // Create a text node that displays the option text
     const textNode = document.createTextNode(' ' + vars[optionName]);
     label.appendChild(textNode);
  
     // Optionally, add some spacing between options
     label.style.marginRight = "10px";
  
     // Append the completed label to the container
     optionsContainer.appendChild(label);
    });
  
    // Function to update the OK button state based on checkbox selection
    function updateButtonState() {
     const checkboxes = document.querySelectorAll('input[name="option"]');
     const okButton = document.getElementById('okButton');
     const anyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
     okButton.disabled = !anyChecked;
    }
  
    // Attach event listeners to all checkboxes to check if one is selected
    document.querySelectorAll('input[name="option"]').forEach(checkbox => {
     checkbox.addEventListener('change', updateButtonState);
    });
  
    // Optional safeguard: Prevent submission if no option is selected (should not occur due to button state)
    document.getElementById('myForm').addEventListener('submit', function(event) {
     const checkboxes = document.querySelectorAll('input[name="option"]');
     const anyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
     if (!anyChecked) {
      event.preventDefault();
     }
     // Otherwise, form submission occurs and OSWeb logs the response using the input's name attribute.
    });
   })();
  </script>
  

  Note that the code ensures that the data are logged. The response is logged in a variable called "option" in the output log. There's also a QuestionID variable to help you identify each specific trial.

  The OK button will only be available if a response option is selected.

  Hopefully this helps, You'd have to adapt the code to match the look you want in your task, but the principle should work.

  Validated MCQ.osexp

  Kind regards,

  Fabrice.

  
• b_lanzini

  April 2

  Thanks @Fab ! This was extremely helpful :)