dimanche 13 juin 2021

Script to run in the **Browser Console** to Toggle `checked` Checkboxes on and off? Used for a Multiple Choice Quiz Page

Current State

I have written a quiz of some 500 questions in multiple choice like so:

Answers are prechecked on checked

1. What is the answer to x?

  • [ ] This
  • [x] That
  • [ ] Other

2. What is the answer to y?

  • [x] This
  • [ ] That
  • [ ] Other

Now, in the browser console I can run:

$$('input[type="checkbox"]').map(i => i.checked = false)`

This perfect so far as it gives me this with all answers unchecked:

1. What is the answer to x?

  • [ ] This
  • [ ] That
  • [ ] Other

2. What is the answer to y?

  • [ ] This
  • [ ] That
  • [ ] Other

Challenge

Now I would like to run a similar script in the browser console again to turn the originally checked answers back on so I may check my answers

Each question answer-list is formed like so in html:

The correct answer has checked="" included for the input type.

<ul class="task-list">
  <li class="task-list-item">
    <label class="task-list-control"
      ><input type="checkbox" /><span class="task-list-indicator"></span
    ></label>
    This
  </li>
  <li class="task-list-item">
    <label class="task-list-control"
      ><input type="checkbox" checked="" /><span
        class="task-list-indicator"
      ></span
    ></label>
    That
  </li>
  <li class="task-list-item">
    <label class="task-list-control"
      ><input type="checkbox" /><span class="task-list-indicator"></span
    ></label>
    Other
  </li>
</ul>

Question: What is the script to check the answers back on that are predefined in the answer lists?




Aucun commentaire:

Enregistrer un commentaire