Forced response on form_multiple_choice with OSWeb

b_lanzini

Hi!

I'm running an experiment on OS and I have several form_multiple_choice.

I noticed that participants can press the button "OK" and proceed even if they haven't ticked any of the given options. I'd like to avoid that, meaning I'd like to force them to choose one of the options before allowing them to click on OK.

I know this question has already been asked, but I can't follow instructions that have been given somewhere else, because my experiment runs on OSWeb, so I can't use the objects form_base nor inline_script. I can use inline_javascript though.

Thanks in advance to anyone who will help :)

Fab

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.

This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.

Validated MCQ.osexp

5.96 KB

Kind regards,

Fabrice.

b_lanzini

Thanks @Fab ! This was extremely helpful :)