送信ボタンをクリックした後で、クイズの回答の隣にテキストを置く方法

Question

誰かが投稿をクリックして、例えば質問1が間違っていた場合、間違った答えの後にいくつかの情報があります。哺乳動物種である。

これまでのところ、私は物事を試してそれを見て、私は実際にそれを動作させることはできません。

<style> 
 
    .quizbox { 
 
    width: 58%; 
 
    max-width: 950px; 
 
    border: 1px gray solid; 
 
    margin: auto; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
    margin-top: 7%; 
 
    text-align: center; 
 
    position: relative; 
 
    } 
 
    
 
    .quizstyle { 
 
    padding-right: 50%; 
 
    } 
 
    
 
    .row { 
 
    text-align: left; 
 
    margin-left: 10%; 
 
    } 
 
</style> 
 

 

 
<div class="quizbox"> 
 

 
    <!-- open main div --> 
 
    <h1>Quiz</h1> 
 
    <form id="form1" action=" "> 
 
    <div class="quizstyle"> 
 
     <h3>Moths are a member of what order?</h3> 
 
     <div class="row"> 
 
     <input name="variable" type="radio" value="0" />Octagon</div> 
 
     <div class="row"> 
 
     <input name="variable" type="radio" value="0" />Leprosy</div> 
 
     <div class="row"> 
 
     <input name="variable" type="radio" value="33" />Lepidoptera</div> 
 
     &nbsp; 
 
     <h3>Question 2</h3> 
 
     <div class="row"> 
 
     <input name="sub" type="radio" value="33" />Answer 1</div> 
 
     <div class="row"> 
 
     <input name="sub" type="radio" value="0" />Answer 2</div> 
 
     <div class="row"> 
 
     <input name="sub" type="radio" value="0" />Answer 3</div> 
 
     &nbsp; 
 
     <h3>Question 3</h3> 
 
     <div class="row"> 
 
     <input name="con" type="radio" value="0" />Answer 1</div> 
 
     <div class="row"> 
 
     <input name="con" type="radio" value="33" />Answer 2</div> 
 
     <div class="row"> 
 
     <input name="con" type="radio" value="0" />Answer 3</div> 
 
    </div> 
 
    <input type="submit" value="Submit" /> 
 

 
    </form>Your grade is: <span id="grade">__</span> 
 
    <p id="grade2"></p> 
 

 
</div> 
 
<!-- close main div --> 
 

 
<script> 
 
    document.getElementById("form1").onsubmit = function() { 
 
    variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); 
 
    sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); 
 
    con = parseInt(document.querySelector('input[name = "con"]:checked').value); 
 

 
    result = variable + sub + con; 
 

 
    document.getElementById("grade").innerHTML = result; 
 
    var result2 = ""; 
 
    if (result == 0) { 
 
     result2 = "I don't think you studied." 
 
    }; 
 
    if (result == 33) { 
 
     result2 = "You need to spend more time. Try again." 
 
    }; 
 
    if (result == 66) { 
 
     result2 = "I think you could do better. Try again." 
 
    }; 
 
    if (result == 99) { 
 
     result2 = "Excellent!" 
 
    }; 
 
    document.getElementById("grade2").innerHTML = result2; 
 

 
    return false; // required to not refresh the page; just leave this here 
 
    } //this ends the submit function 
 
</script>

Answer 1

ソリューションの下に見つけてください。それがあなたのために働くことを願っています。

document.getElementById("form1").onsubmit = function(e) { 
 
e.preventDefault(); 
 
    variable = parseInt(document.querySelector('input[name = "variable"]:checked').value); 
 
    sub = parseInt(document.querySelector('input[name = "sub"]:checked').value); 
 
    con = parseInt(document.querySelector('input[name = "con"]:checked').value); 
 

 
    result = variable + sub + con; 
 

 
    document.getElementById("grade").innerHTML = result; 
 
    var result2 = ""; 
 
    if (result == 0) { 
 
     result2 = "I don't think you studied." 
 
    }; 
 
    if (result == 33) { 
 
     result2 = "You need to spend more time. Try again." 
 
    }; 
 
    if (result == 66) { 
 
     result2 = "I think you could do better. Try again." 
 
    }; 
 
    if (result == 99) { 
 
     result2 = "Excellent!" 
 
    }; 
 
    document.getElementById("grade2").innerHTML = result2; 
 

 
    return false; // required to not refresh the page; just leave this here 
 
    } //this ends the submit function

<style> 
 
    .quizbox { 
 
    width: 58%; 
 
    max-width: 950px; 
 
    border: 1px gray solid; 
 
    margin: auto; 
 
    padding: 10px; 
 
    border-radius: 10px; 
 
    margin-top: 7%; 
 
    text-align: center; 
 
    position: relative; 
 
    } 
 
    
 
    .quizstyle { 
 
    padding-right: 50%; 
 
    } 
 
    
 
    .row { 
 
    text-align: left; 
 
    margin-left: 10%; 
 
    } 
 
</style> 
 

 

 
<div class="quizbox"> 
 

 
    <!-- open main div --> 
 
    <h1>Quiz</h1> 
 
    <form id="form1" action=" "> 
 
    <div class="quizstyle"> 
 
     <h3>Moths are a member of what order?</h3> 
 
     <div class="row"> 
 
     <input name="variable" type="radio" value="0" />Octagon</div> 
 
     <div class="row"> 
 
     <input name="variable" type="radio" value="0" />Leprosy</div> 
 
     <div class="row"> 
 
     <input name="variable" type="radio" value="33" />Lepidoptera</div> 
 
     &nbsp; 
 
     <h3>Question 2</h3> 
 
     <div class="row"> 
 
     <input name="sub" type="radio" value="33" />Answer 1</div> 
 
     <div class="row"> 
 
     <input name="sub" type="radio" value="0" />Answer 2</div> 
 
     <div class="row"> 
 
     <input name="sub" type="radio" value="0" />Answer 3</div> 
 
     &nbsp; 
 
     <h3>Question 3</h3> 
 
     <div class="row"> 
 
     <input name="con" type="radio" value="0" />Answer 1</div> 
 
     <div class="row"> 
 
     <input name="con" type="radio" value="33" />Answer 2</div> 
 
     <div class="row"> 
 
     <input name="con" type="radio" value="0" />Answer 3</div> 
 
    </div> 
 
    <input type="submit" value="Submit" /> 
 

 
    </form>Your grade is: <span id="grade">__</span> 
 
    <p id="grade2"></p> 
 

 
</div> 
 
<!-- close main div -->