如何使用 PHP 和/或 JavaScript 将用户的分数存储在我网站上的变量中？

Question

Right now I am displaying a question and its possible answers in a modal on my page (shown below). The "submit answer" button will post the form but I can't use it in my situation (I explain this at the bottom of this post) so please ignore it.

I use the HTML & PHP code below to do retrieve the question and answers from my database.

<!-- The Modals -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <!-- display question as heading -->
        <?php
                while ( $row = $result->fetch_assoc() ) {
                    echo "<h3>" . $row[ "question" ] . "</h3>";
                }
            ?>
        <button id="close1" class="close">&times;</button>
        </div>
        <div class="modal-body">
        <form action="#" method="post" id="quiz">
                <!-- display answers as radio -->
                <div>
                <?php
                    while ($id = $choice_idResult1->fetch_assoc()) {
                    echo '<input type= "radio" name="question1_answers" id="question1_answers_A" value= "' . $id["choice_id"] . '"';
                    }
                ?>
                    <label for="question1_answers_A">
                    <?php while($row = $result2->fetch_assoc()) {echo $row["choice_text"];}
                            $answer1 = $row;
                    ?>
                    </label>
                </div> .....

When the "Open Modal 2" button is clicked, the JavaScript code below closes the modal and opens the next.

btn2.onclick = function() {
    checkRadio('question1_answers_B');
    modal.style.display = "none";
    modal2.style.display = "block";
}

As you can see, I've called a function called checkRadio and passes it the id of the radio input that is the correct answer.

checkRadio then uses an if statement to check whether that radio is checked and if it is it calls another function that increments a variable tally .

var tally = 0;

function checkRadio(id) {
    if (document.getElementById(id).checked) {
        addTally();
    }
}

function addTally() {
    tally++;
}

I then have a function called showTally that I want to display the tally in the header of the next modal (for testing purposes). However, nothing shows up in the next modal no matter what I select.

    function showTally() {
    document.getElementById("tally").innerHTML = tally;
}

And in the modal header:

<h3 id="tally"></h3>

In plain English, I need to be able to identify which radio input has been selected by the user so that I can check it is the correct answer and add to the tally which will be displayed after the last question.I can't actually post the form as it will close the modal.

If you need more screenshots or information please let me know.

Answer 1

I may be misunderstanding the question, but this may help you.

var myAnswers1 = document.querySelector("question1_answers");
for(var i=0;i<myAnswers1.length;i++)
   {
       console.log("Question 1, radio index " + i + " is " + myAnswers1[i].checked + ".");
   }

Sample Output:

Question 1, radio index 0 is false.
Question 1, radio index 1 is true.
Question 1, radio index 2 is true.

Answer 2

You can use localStorage or sessionStorage , it can save info to the session, the info exists when you refresh or redirect html page (same domain). Here is usage below:

var tally = localStorage.getItem('tally') || 0
function addTally() {
    tally++;
    localStorage.setItem('tally', tally)
}