exercise_workflow.md

Workflow of adding an exercise to a chapter

1. Locate the chapter's <details> tag (it should be at the bottom of the R Markdown file). You can start an exercise right below the <summary>🤸 Вправи</summary> line.

2. If the exercise does not contain an image or a code block, one can use the jsquiz::generate_mcq() function from the {jsquiz} package. Start by adding a new R code chunk with the following options results='asis', message=FALSE, echo=FALSE, i.e.:

   ```{r, results='asis', message=FALSE, echo=FALSE}
   # your function goes here
   ```

3. Call the function with the following arguments:

   • question: a string that contains the question itself. It Should start with the ordering number (e.g., 1.). If the question contains code, then the code should be wrapped into tage <code></code>.
   • answers: a logical vector, names of which will be answer options, whereas elements are TRUE or FALSE. Elements define whether the respective name is the correct or wrong answer. Please note that if allow_multiple_answers (see below) is FALSE, then only one element can be TRUE.
   • button_label: a string that defines the label of the button. Simply use "Перевірити".
   • allow_multiple_answers: a logical vector with one element -- TRUE is for MCQ with multiple correct options and FALSE is for MCQ with only one correct option.
   • button_id: a string that defines the HTML identifier for a button. By convention, it should be constructed as follows: check_xxx_y, where xxx is the name of the chapter file (i.e., tuple or vars_opers_funcs), and y is the ordering number that should be the same as in the question argument.
   • radio_buttons_id: a string that defines HTML identifier for options. By convention, it should have the following format mcq_xxx_y, where xxx is the name of the chapter file (i.e., tuple or vars_opers_funcs), and y is the ordering number that should be the same as in the question argument.

4. If the question has only one correct option, then add the following code somewhere to the listeners.js file:

   window.addEventListener('DOMContentLoaded', function() {
       const radioButtons = document.getElementsByName('XXX');
       const submitButton = document.getElementById('YYY');
       
       radioButtons.forEach(function(radioButton) {
           radioButton.addEventListener('change', function() {
           submitButton.disabled = false;
           });
       });
   });
   

   where: XXX is radio_buttons_id, and YYY is button_id.

   This piece of code allows enabling buttons, once at least one option is selected.