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

Question

现在我在我的页面上显示一个问题和可能的答案（如下图所示）。提交答案 "按钮将发布表单，但我不能在我的情况下使用它（我在这篇文章的底部解释了这一点），所以请忽略它。

我使用下面的HTML & PHP代码来做从我的数据库中检索问题和答案。

<!-- 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> .....

当点击 "Open Modal 2 "按钮时，下面的JavaScript代码会关闭该模态并打开下一个。

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

正如你所看到的，我已经调用了一个叫作 checkRadio 并将正确答案的单选输入的id传递给它。

checkRadio 然后使用if语句来检查该单选是否被选中，如果被选中，则调用另一个函数来递增一个变量。tally.

var tally = 0;

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

function addTally() {
    tally++;
}

然后我有一个函数叫做 showTally 我想在下一个模版的头部显示统计结果（为了测试目的）。然而，无论我选择什么，下一个模态中都没有任何显示。

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

而且是在模态的头部。

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

用简单的英语说，我需要能够识别用户选择了哪个单选输入，这样我就可以检查它是否是正确的答案，并添加到最后一个问题后显示的统计中。

如果你需要更多的截图或信息，请告诉我。

Answer 1

你可以使用 localStorage 或 sessionStorage它可以将信息保存到会话中，当你刷新或重定向html页面（同一域名）时，信息就会存在。"下面是用法。

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

Answer 2

我可能误解了问题，但这可能会帮助你。

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 + ".");
   }

示例输出。

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