//Q&A checkbox with custom feedback (form_number, element_name, hint_boolean=default:false, individual_feedback=default:true)
function form_check_custom_feedback(form_number,element_name,hint_boolean,individual_feedback) {
    //defining the form
    var myform = document.forms['form'+form_number]
    //defining the checkboxes in the form
    var elements = myform[element_name]
    var checked = false //assuming nothing is checked
    var counter_correct = 0
    var counter_incorrect = 0
    //searching for checked answers
    for (i1=0;i1<elements.length;i1++) {
        if (elements[i1].checked) {
            //alert('I found one!')
            //checked turns true when at least one checked answer found
            checked = true;
            //
            myform.getElementsByClassName('feedback')[i1+1].style.display = "block"
            //counting the number of selected answers that are correct
            if (elements[i1].value == 't') {
              counter_correct += 1;
            } else {
              counter_incorrect += 1
            }
        }
    }
    if (checked) {
      //display the message 'After going through...'
      myform.getElementsByClassName('feedback')[0].style.display = "block"
      //hint at the end of the feedback if hint_boolean='true'
      if (hint_boolean) {
        var hint_element = myform.getElementsByClassName('feedback')[myform.getElementsByClassName('feedback').length-1]
        var hint_feedback_text = "<strong>There are 3 correct answers!</strong> You have selected <strong>"+counter_correct+"</strong> correct answer(s)."+
        "<br>If you have selected <strong><u>all</u></strong> the necessary warnings, you can lean back for a moment now and wait until your shift is over. A brief overview about your shift and the past hours will be provided afterwards."+
        "<br>Otherwise, please check your answers."
        hint_element.innerHTML = hint_feedback_text
        hint_element.style.display = "block"
      }
      if (!individual_feedback) {
        if (counter_correct > 0 && counter_incorrect > 0) {
          document.getElementsByClassName('correct_feedback')[0].style.display = "block"
          document.getElementsByClassName('incorrect_feedback')[0].style.display = "block"
        } else if (counter_correct > 0 && counter_incorrect == 0) {
          document.getElementsByClassName('correct_feedback')[0].style.display = "block"
        } else if (counter_correct == 0 && counter_incorrect > 0) {
          document.getElementsByClassName('incorrect_feedback')[0].style.display = "block"
        }
      }
      //OPTIONAL!!
      document.getElementById('summary_button').style.display = "block"
      ////////////
    } else {
        alert('Select your answers!')
    }
}

/*<div class="question_wrap">

        <h3>Issue warning</h3>
        <p class="question"><br><br>Please choose for what time you would issue a warning:</p>

        <form id="form1">
          <div style="margin-left:60px">
            <table class="check_table">
              <tr>
                <td><input type="checkbox" name="warning1" value="f" autocomplete="off">a) None.</td>
              </tr>
              <tr>
                <td><input type="checkbox" name="warning1" value="f" autocomplete="off">b) 3 o'clock</td>
              </tr>
            </table>
            <br>
            <input type="button" name="submit" value="Submit" onclick="form_check_custom_feedback(1,'warning1',true, false)">
            <input type="button" name="retry" value="Retry" onclick="location.reload()">
          </div>
          <div class="feedback"><strong>After going through the material again, you realize that:</strong></div>
          <div id="answer1" class="feedback"><strong>Individual feedback.</strong></div>
          <div id="answer2" class="feedback"><strong>Individual feedback.</strong></div>
          
          <!--When only individual feedback present, the 2 lower divs are unnecessary-->
          <div class="correct_feedback feedback"><strong>Feedback for the correct answer(s): Non-individual feedback.<br></div>
          <div class="incorrect_feedback feedback"><strong>Feedback for the incorrect answer(s): Non-individual feedback.</div><br>
          <!-Div for the hint_feedback-->
          <div id="hint_feedback" class="feedback"></div>
        </form><br><br>
        <!-- end answer -->

      </div>
      <!-- end checkbox interaction -->*/


//function for evaluation checkbox questions in a form, the input is the form number
function form_check_questions(form_number,element_name,show_input) {
    var show_user_input = false || show_input
    //defining the form
    var myform = document.forms['form'+form_number]
    //defining the checkboxes of the form
    var checks = myform[element_name]
    //console.log(checks)
    var checked = false //assuming nothing is checked
    //searching for checked answers
    for (i1=0;i1<checks.length;i1++) {
        if (checks[i1].checked) {
            //alert('I found one!')
            checked = true;
            break
        }
    }
    //if there is something checked show the correct answers and the feedback
    if (checked) {
        //display the message of the feedback
        //if show user input = true, show the selected answers
        if (show_user_input) {
          var warning_decision = "<strong>Your decision:</strong><br>"
          for (i2=0;i2<checks.length;i2++) {
            if (checks[i2].checked) {
              myform.getElementsByTagName('td')[i2+3].style.borderRadius = "10px"
              myform.getElementsByTagName('td')[i2+3].style.background = "#86b7fc"
              warning_decision += checks[i2].value + ' '
            }
          }
          warning_decision += '<br>Keep this window <strong>open</strong> so you can compare your other tasks to this first guess!'
          //console.log(warning_decision)
          myform.getElementsByClassName('feedback')[0].innerHTML = warning_decision
          myform.getElementsByClassName('feedback')[0].style.display = "block";
        } else {
          //if show user input = false, show the correct answers
          //mark all the correct answers by changin the color of their background
          var corr_answers = myform.getElementsByClassName('correct');
          for (i1=0;i1<corr_answers.length;i1++) {
              corr_answers[i1].style.background = "#d4f3ca"
          }
          myform.getElementsByClassName('feedback')[0].style.display = "block";
        }
        var next = form_number+1
        if (document.getElementById('div'+next) != undefined || document.getElementById('div'+next) != null) {
          document.getElementById('div'+next).style.display = "block";
        }
        //console.log('Checked')
    } else { //if nothing is checked alert the user
        alert('Select an answer')
    }
}

/*<div class="question_wrap">
        <h3>Question 1</h3>
        <p class="question"><br><br>Question text</p>

          <form id="form1">
            <div style="margin-left:60px">
              <table class="checkbox_table">
                <tr>
                  <td><strong>Label1</strong></td>
                  <td><strong>Label2</strong></td>
                  <td><strong>Label3</strong></td>
                </tr>
                <tr>
                  <td><input type="checkbox" name="issue_warning" value="m20">a)</td>
                  <td><input type="checkbox" name="issue_warning" value="v20">b)</td>
                  <td><input type="checkbox" name="issue_warning" value="s20">c)</td>
                </tr>
                <tr>
                  <td><input type="checkbox" name="issue_warning" value="m21">d)</td>
                  <td><input type="checkbox" name="issue_warning" value="v21">e)</td>
                  <td class="correct"><input type="checkbox" name="issue_warning" value="s21">f)</td>
                </tr>
              </table>
              <br>
              <input type="button" value="Submit" onclick="form_checkbox_questions(1)">
            </div>
            <div class="feedback"><strong>The correct answer(s) is/are:</strong> Label3 f)<br></div>
          </form>

          <!-- end answer -->
      </div>
      <!-- end checkbox interaction -->*/


//function for evaluating the checkbox questions, the input is the question number
function checkbox_question(q_num) {

    //checking if any answer is selected
    //defining options of the checkbox
    var options = document.getElementsByName('q'+q_num);

    //setting the starting assumption, nothing is selected
    var answers_checked = false;
    //going through the checkboxes, searching for checked items
    for (i1=1;i1<options.length+1;i1++) {
        if (options[i1-1].checked) {
            answers_checked = true; //if anything checked, the starting assumption is changing to True -> something is checked
            break //exiting the loop
        }
    }
    //if there is something checked, show the correct answers and the feedback
    if (answers_checked) {
        var answers = document.getElementsByClassName('option'+q_num+' correct'); //grabbing all elements with the class name "option" and "correct"
        for (i2=0;i2<answers.length;i2++) {
            answers[i2].style.background = '#d4f3ca' //changing the background color of the correct items
        }
        document.getElementById('feedback'+q_num).style.display = 'block'; //displaying the feedback to the answers
    //if there is nothing checked, alert the user!
    } else {
        alert('Select an answer!')
    }
}

/*<div class="quiz_wrap">

    <p><strong>Quiz example:</strong></p>

    <div class="question_wrap">

        <p><strong>Question 1:</strong></p>
        <p>Question text</p>

        <div class="option1 correct">
            <input id="q11" name="q1" value="1" type="checkbox" autocomplete="off">
            <label for="q11">&nbsp;<strong>Answer 1</strong></label>
        </div>
        <div class="option1">
            <input id="q12" name="q1" value="2" type="checkbox" autocomplete="off">
            <label for="q12">&nbsp;<strong>Answer 2</strong></label>
        </div>
        <br>

        <button onclick="checkbox_question(1)">Done!</button>

        <div id="feedback1" style="display:none">
            <br>
            <p class="response">
                <strong>The correct answer(s) is/are:</strong> a), b)<br> Explanation of the answer.
            </p>
            <br>
        </div><!-- end answer -->

    </div><!-- end question_wrap -->

</div>*/