Question

嘿，我在这里需要绝望的帮助，我是jquery的新手，我有这样的任务，应该是... 12个小时左右？

我花了5个小时尝试这样做，经历了多组不同的代码，但我不明白！无论如何也许你可以帮助我？

我想要的是将分数发布到另一个html页面，但分数必须全部使用Jquery完成。测验以HTML格式完成。

这是我测验的HTML：

<DOCTYPE! html>

<head>
    <title> The Boy In the Striped Pajamas by John Boyne </title>
    <link rel="stylesheet" type= "text/css" href="formstylesheet.css">
    <link rel="stylesheet" type= "text/css" href="stylesheet.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!--- fontstyles --->
    <link href='https://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="title">
    <h1> The Boy in The Striped Pajamas</h1>
    <h2> By John Boyne </h2>
    </div>

    <nav>
    <ul>
        <li><a href="index.html"><strong>Home</a></li>
        <li><a href="author.html">About The Author</a> </li>
        <li><a href="history.html">WW2 History</strong></a> </li>
        <li><a href="quiz.html"><strong>Quiz!</strong></a> </li>
    </ul>
    </nav>
    <div class="content">
    <form name="myForm" action="answers.html" onsubmit="return validateForm()" method="post">   
        <h4>Let's do a Quiz!</h4>
        <p> Make sure you have read both the history and story content first before answering!

        <h6 id="q1"> Who were the two boy characters in the story?</h6>
            <input type="radio" name="choices" value="0" id="1.0">Bruno & Schmuel<br>
            <input type="radio" name="choices" value="1" id="1.1">Bruno & Schmel<br>
            <input type="radio" name="choices" value="2" id="1.2"> Schmuell & Runo

        <h6 id="q2"> Who is the author of <em>The Boy in The Striped Pajamas</em>?</h6>
            <input type="radio" name="choices" value="0" id="2.0">Cassandra Clare<br>
            <input type="radio" name="choices"" value="1" id="2.1">William Shakespeare<br>
            <input type="radio" name="choices" value="2" id="2.2">John Boyne

        <h6 id="q3"> What is <em>The Boy in The Striped Pajamas</em> about?</h6>
            <input type="radio" name="choices" value="0" id="3.0">The First World War<br>
            <input type="radio" name="choices" value="1" id="3.1">The Vietnam War<br>
            <input type="radio" name="choices"" value="2" id="3.2">The Second World War

        <h6 id="q4"> Who was the Chancellor of Germany during the Second World War?</h6>
            <input type="radio" name="choices" value="0" id="4.0">Adolf Hitler<br>
            <input type="radio" name="choices" value="1" id="4.1">Abraham Lincoln<br>
            <input type="radio" name="choices" value="2" id="4.2"> Vladimir Putin

        <h6 id="q5"> What time period was the Second World War?</h6>
            <input type="radio" name="choices" value="0" id="5.0">1939-1944<br>
            <input type="radio" name="choices" value="1" id="5.1">1941-1950<br>
            <input type="radio" name="choices" value="2" id="5.2"> 1939-1945
        <br>
    <input type="submit" name="Submit" class="submit">
        <input type="reset" name="Reset" class="reset">

</form>
    </div>
</body>
    <footer>
    <ul>
        <li><a href="index.html"><strong>Home</a></li>
        <li><a href="author.html">About The Author</a> </li>
        <li><a href="history.html">WW2 History</strong></a> </li>
        <li><a href="quiz.html"><strong>Quiz!</strong></a> </li>
    </ul>
    </footer>

html答案：

<head>
    <title> The Boy In the Striped Pajamas by John Boyne </title>
    <link rel="stylesheet" type= "text/css" href="stylesheet.css">
    <script src="jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!--- fontstyles --->
    <link href='https://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="title">
    <h1> The Boy in The Striped Pajamas</h1>
    <h2> By John Boyne </h2>
    </div>

    <nav>
    <ul>
        <li><a href="index.html"><strong>Home</a></li>
        <li><a href="author.html">About The Author</a> </li>
        <li><a href="history.html">WW2 History</strong></a> </li>
        <li><a href="quiz.html"><strong>Quiz!</strong></a> </li>
    </ul>
    </nav>
    <div class="content">
        <h4>Your Score:</h4>
    <!--- have jquery insert score here --->

    </div>
</body>
    <footer>
    <ul>
        <li><a href="index.html"><strong>Home</a></li>
        <li><a href="author.html">About The Author</a> </li>
        <li><a href="history.html">WW2 History</strong></a> </li>
        <li><a href="quiz.html"><strong>Quiz!</strong></a> </li>
    </ul>
    </footer>

最后我的Javascript文件：

// quiz - please dont judge!!

var score = 0;

function submit () {
var q1answer = $('#1.0');
var q2answer = $('#2.2');
var q3answer = $('#3.2');
var q4answer = $('#4.0');
var q5answer = $('#5.2');

function checkanswers () {
    if (q1answer.checked === true) {
    score ++;
}
else {
    score;
} // question 2
    if (q2answer.checked === true) {
    score ++;
}
else {
    score;
} //question 3
    if (q3answer.checked === true) {
    score ++;
}
else {
    score;
}//question 4
    if (q4answer.checked === true) {
    score ++;
}
else {
    score;
}//question 5
    if (q5answer.checked === true) {
    score ++;
}
else {
    score;
}
function display() {
    score.show();
    answers.html("You Scored: " + score + "/5");
}

} }

你认为问题是格式还是？我没有做过很多javascript，所以我很难理解发生了什么。但我上面写的代码我理解，因此我写了它。

这真的有帮助！

Answer 1

我看到了你的代码，我觉得你刚开始学习，所以我决定帮忙。

首先是几件事 1.对于不同的问题，您不应该为同一个名称命名多个无线电盒。您已经使用了两个问题的选择。将其更改为其他内容。一个名称用于一组选择。

 <h6 id="q1"> Who were the two boy characters in the story?</h6>
        <input type="radio" name="choices" value="0" id="1.0">Bruno & Schmuel<br>
        <input type="radio" name="choices" value="1" id="1.1">Bruno & Schmel<br>
        <input type="radio" name="choices" value="2" id="1.2"> Schmuell & Runo

    <h6 id="q2"> Who is the author of <em>The Boy in The Striped Pajamas</em>?</h6>
        <input type="radio" name="choices" value="0" id="2.0">Cassandra Clare<br>
        <input type="radio" name="choices" value="1" id="2.1">William Shakespeare<br>
        <input type="radio" name="choices" value="2" id="2.2">John Boyne

格式化你的HTML。很多地方都有双引号。在很多地方你都有名字=“选择”“。这会破坏你的代码。

完成这两件事之后，我建议采用这种非常简单的方法：
1.单击按钮调用Javascript函数。 http://www.w3schools.com/jsref/event_onclick.asp
2.在该函数中计算是否选择了正确的选项。你可以像现在这样做。计算分数 3.要显示分数，您不需要另一个html页面。您必须在同一页面中进行操作，结构也会显示答案页面。只需使用正确的分数更改class =“content”的div的html即可。这是您需要的功能。 http://api.jquery.com/html/

由于这是一项任务，我不会为您提供直接的解决方案，也不要惊慌，您有足够的时间。有任何问题，请在评论中发布。我们都去过那里，所以试试吧，你会得到它，希望有一天你会帮助别人：）

严重帮助：Jquery测验分数

1 个答案: