Allow unselecting choice on second click

Author: orronai

lms/static/checker.js

@@ -1,7 +1,7 @@
 function trackFinished(exerciseId, solutionId, element) {
   element.addEventListener('click', () => {
     const assessment = document.querySelector('input[name="assessment"]:checked');
-    const assessmentValue = assessment.value;
+    const assessmentValue = (assessment !== null) ? assessment.value : null;
     const xhr = new XMLHttpRequest();
     xhr.open('POST', `/checked/${exerciseId}/${solutionId}`, true);
     xhr.setRequestHeader('Content-Type', 'application/json');
@@ -26,6 +26,23 @@ function trackFinished(exerciseId, solutionId, element) {
   });
 }
 
+function trackAssessmentButtons() {
+  assessmentGroup = document.getElementById('solution-assessment');
+  assessmentElements = document.querySelectorAll('input[name="assessment"]');
+  Array.from(assessmentElements).forEach((item) => {
+    item.addEventListener('click', () => {
+      if (item.value == assessmentGroup.dataset.checkedid) {
+        item.removeAttribute('checked');
+        item.checked = false;
+        assessmentGroup.dataset.checkedid = 'None';
+      } else {
+        assessmentGroup.dataset.checkedid = item.value;
+      }
+    }, true);
+  });
+}
+
 window.addEventListener('lines-numbered', () => {
   trackFinished(window.exerciseId, window.solutionId, document.getElementById('save-check'));
+  trackAssessmentButtons();
 });

lms/templates/view.html

@@ -110,9 +110,9 @@ <h5 class="test-name">
     <div id="popular-comments">
       <div id="exercise-assessment" class="{{ direction }}">
         <h2>{{ _('Assessment') }}</h2>
-        <div class="btn-group-vertical" id="solution-assessment" role="group" aria-label="assessments radio toggle button group">
+        <div class="btn-group-vertical" id="solution-assessment" role="group" aria-label="assessments radio toggle button group" data-checkedid="{{ solution.assessment.id }}">
           {% for assessment in assessments %}
-            <input type="radio" class="btn-check" name="assessment" id="btnradio{{ loop.index }}" autocomplete="off" value="{{ assessment.id }}"{% if solution.assessment.name == assessment.name or loop.first %} checked{% endif %}>
+            <input type="radio" class="btn-check" name="assessment" id="btnradio{{ loop.index }}" autocomplete="off" value="{{ assessment.id }}"{% if solution.assessment.name == assessment.name %} checked{% endif %}>
             <label class="btn btn-outline" style="--color: {{ assessment.color }}; --active-color: {{ assessment.active_color }};" for="btnradio{{ loop.index }}">
               {% if assessment.icon %}
                 <i class="fa fa-{{ assessment.icon }}"> </i>