JavaScript多项选择测验。一次显示一页

时间:2017-03-29 10:49:23

标签: javascript html css meteor web-applications

我做了一个JavaScript测验,这可能是一个明显的修复,但我一直试图一次显示一个问题。我点击下一个时想显示下一个问题。但是我无法找到这样做的方法。 p.s我不是JavaScript专家。

这是我目前的代码:

<form id="form1" action=" ">
    <center>
        <h3><br><img src='images/bulb logo.png' width = '30'/>Did you turn off your heating in the day time?</h3></center>
    <center>
        <input type="radio" name="variable" value="25" /> YES</center>
    <br />
    <center>
        <input type="radio" name="variable" value="0" /> NO</center>
    <br />

    <audio id="myTune">
        <source src="sounds/buttonclick.mp3">
        <source src="sounds/buttonclick.ogg">
    </audio>

    <center>
        <h3> <br><img src='images/bulb logo.png' width = '30'/>Did you switch off lights when not needed?</h3></center>
    <center>
        <input type="radio" name="sub" value="25" /> YES</center>
    <br />
    <center>
        <input type="radio" name="sub" value="0" /> NO</center>
    <br />

    <center>
        <h3><br><img src='images/bulb logo.png' width = '30'/>  Did you turn off your computer monitor when not in use?</h3></center>
    <center>
        <input type="radio" name="con" value="25" /> YES</center>
    <br />
    <center>
        <input type="radio" name="con" value="0" /> NO</center>
    <br />

    <center>
        <h3> <br><img src='images/bulb logo.png' width = '30'/> Have you turned off power outlets?</h3></center>
    <center>
        <input type="radio" name="if" value="25" /> YES</center>
    <br />
    <center>
        <input type="radio" name="if" value="0" /> NO</center>
    <br />

    <center>
        <input type="submit" value="Submit" id="submit" onclick="document.getElementById('myTune').play()" />
    </center>

</form>

<center>
    <h2> You scored : <span id="grade">__</span></h2></center>
<p id="grade2"></p>

</div>

<script>
    //get form selection once submitted and calculate the score 
    document.getElementById("form1").onsubmit = function() {
        variablevar = document.getElementsByName("variable");
        for (i = 0; i < variablevar.length; i++) {
            if (variablevar[i].checked) {
                vscore = parseInt(variablevar[i].value);
            }
        }

        subvar = document.getElementsByName("sub");
        for (i = 0; i < subvar.length; i++) {
            if (subvar[i].checked) {
                sscore = parseInt(subvar[i].value);
            }
        }

        convar = document.getElementsByName("con");
        for (i = 0; i < convar.length; i++) {
            if (convar[i].checked) {
                cscore = parseInt(subvar[i].value);
            }
        }

        ifvar = document.getElementsByName("if");
        for (i = 0; i < ifvar.length; i++) {
            if (ifvar[i].checked) {
                iscore = parseInt(ifvar[i].value);
            }
        }

        result = vscore + sscore + cscore + iscore;

        document.getElementById("grade").innerHTML = result;
        if (result == 0) {
            result2 = "Make more efforts to save energy."
        };
        if (result == 25) {
            result2 = "A little goes a long way, try harder"
        };
        if (result == 50) {
            result2 = "I think you could do better. Try again.<br/><img src='images/badge_4.jpg' width = '100'/>"
        };
        if (result == 75) {
            result2 = "Welldone. So close to being green<br/><img src='images/badge_3.jpg' width = '100'/>"
        };
        if (result == 100) {
            result2 = "Excellent! You're a natural conserver!<br/><img src='images/badge_4.jpg' width = '100'/>"
        };
        document.getElementById("grade2").innerHTML = result2;

        return false;

    }
</script>

0 个答案:

没有答案