/*<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>*/

//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!')
    }
}