TL; DR

在回答第一个问题并单击提交后，我无法显示下一组答案（下一种形式），而当前的答案也消失了。我希望它显示一个问题和每个问题的答案。

我还希望通过练习JS完成此操作。

HTML

<body>

<div class="page-wrapper"> 
    <div class="user-box">

        <div class="question">
            <p id="q"> </p>
        </div>

        <div class="answer-box">
            <form id="answer1" class="answer" name="answer1">
                <input class="choice" type="radio" id="option" name="question1" value="Cleveland">Cleveland
                <input class="choice" type="radio" id="option" name="question1" value="Columbus">Columbus 
                <input class="choice" type="radio" id="option" name="question1" value="Aliiance">Alliance
                <input class="button" type="button" id="button" value="Submit" onclick="check()">
            </form>        

            <form id="answer2" class="answer" name="answer2">
                <input class="choice" type="radio" id="option" name="question2" value="Black & White">Black & White
                <input class="choice" type="radio" id="option" name="question2" value="Red & Blue">Red & Blue
                <input class="choice" type="radio" id="option" name="question2" value="Orange & Brown">Orange & Brown
                <input class="button" type="button" id="button" value="Submit" onclick="check()">
            </form>        

        <form id="answer3" class="answer" name="answer3">
                <input class="choice" type="radio" id="option" name="question3" value="One">One
                <input class="choice" type="radio" id="option" name="question3" value="Two">Two
                <input class="choice" type="radio" id="option" name="question3" value="Three">Three
                <input class="button" type="button" id="button" value="Submit" onclick="check()">
            </form>        
        </div>

        <div id="after-submit">
                <p id="number-correct"></p>

        </div>

    </div>
</div>
</body>
</html>

CSS

body {
background-color: #1d1e22;
font-family: Arial, Helvetica, sans-serif; }

.page-wrapper {
 width: 100%;
 max-width: 960px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 min-height: 700px; }

 .user-box {
 width: 800px;
 height: 450px;
 background-color: #393f4d;
 margin: 0 auto; }

 .question {
 width: 90%;
 color: #d4d4dc;
 text-align: center;
 padding: 10px;
 margin: 20px auto;
 font-size: 30px; }

 .answer-box {
 width: 70%;
 height: 180px;
 margin: 0 auto;
 background-color: white;
 display: flex;
 justify-content: center;
 align-items: center; }

 .answers {
 width: 401px;
 text-align: center; }

 .choice {
 display: inline-block;
 margin: 0 20px; }

 .button {
 position: relative;
 top: 20px; }

 #after-submit, #wrong {
 visibility: hidden;
 text-align: center;
 color: #d4d4dc; }

 #q2, #q3 {
 display: none; }

 #answer2, #answer3 {
 display: none; }

JavaScript

    //Questions array
var questions = ["What is the capital of Ohio?", "What color is a zebra?", "How many licks does it take?"];

var displayQ = questions[Symbol.iterator]();

//Show first question on load

window.onload = function load() {
    var q = document.getElementById("q");
    q.innerHTML = questions[0];
}

function check(){
    var radios = document.getElementsByClassName("choice");
    var radioValue;
    var correct = 0;

    //Display new qusetion after click
    let nextQ = displayQ.next(); // get the next element
(nextQ.done) ? 
    [q.innerText, this.innerText, this.disabled] = ['Complete!', 'Done', true]
    :q.innerText = nextQ.value;

    //Correct answers array

    var answers = ["Columbus", "Black & White", "One"];

    //Get user radio selection value

    for (var i = 0; i < radios.length; i++){
        if (radios[i].checked) {
            radioValue = radios[i].value;
        }
    }

    //If no radio value is selected, send alert message

    if (radioValue == null){
        alert("Select an answer!");
        return
    } 

    //Check answers array against user radio value

    for (var j = 0; j <= answers.length; j++){
        if (radioValue === answers[j]){
            correct++;
            document.getElementById("after-submit").style.visibility = "visible";
            document.getElementById("number-correct").innerHTML = "You got " + correct + " correct.";
            return
        } else {
            document.getElementById("after-submit").style.visibility = "visible";
            document.getElementById("number-correct").innerHTML = "Wrong. Try agian.";
            return
        }
    }
}

显示单个问题和每个问题的答案集（JS测验）

TL; DR

0 个答案: