我是javascript / jquery的新手，我很难用jquery和javascript进行测验，但我想只使用javascript而不是jquery。
如何才能使用javascript让测验与现在一样？有没有办法跳过jquery？
HTML
<html>
<head>
<title>Quiz</title>
</head>
<body>
<div id="main-quiz-holder">
<div id="intro-container" class="questionContainer">
<a class="btnStart" href="#"><img src="img/start.png"/></a>
</div>
<div class="questionContainer hide">
<div class="question">
Vraag 1: Wat is de juiste spelling?
</div>
<ul class="answers">
<li>
<label><input data-key="a" type="radio" name="vraag1">Huisen</label>
</li>
<li>
<label><input data-key="b" type="radio" name="vraag1">Huizen</label>
</li>
<li>
<label><input data-key="c" type="radio" name="vraag1">Huiszen</label>
</li>
<li>
<label><input data-key="d" type="radio" name="vraag1">Huize</label>
</li>
</ul>
<div class="btnContainer">
<div class="next">
<a class="btnNext" href="#">Volgende</a>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="questionContainer hide">
<div class="question">
Vraag 2: U bevindt zich momenteel:
</div>
<ul class="answers">
<li>
<label><input data-key="a" type="radio" name="vraag2">On line</label>
</li>
<li>
<label><input data-key="b" type="radio" name="vraag2">On-line</label>
</li>
<li>
<label><input data-key="c" type="radio" name="vraag2">Online</label>
</li>
</ul>
<div class="btnContainer">
<div class="prev">
<a class="btnPrev" href="#">Vorige</a>
</div>
<div class="next">
<a class="btnNext" href="#">Volgende</a>
</div>
<div class="clear">
</div>
</div>
</div>
<div class="questionContainer hide">
<div class="question">
Vraag 3: Een kleine sms?
</div>
<ul class="answers">
<li>
<label><input data-key="a" type="radio" name="vraag3">smsje</label>
</li>
<li>
<label><input data-key="b" type="radio" name="vraag3">sms-je</label>
</li>
<li>
<label><input data-key="c" type="radio" name="vraag3">sms'tje</label>
</li>
<li>
<label><input data-key="d" type="radio" name="vraag3">sms'je</label>
</li>
</ul>
<div class="btnContainer">
<div class="prev">
<a class="btnPrev" href="#">Vorige</a>
</div>
<div class="next">
<a class="btnShowResult" href="#">Kijk na</a>
</div>
<div class="clear">
</div>
</div>
</div>
<div id="results-container" class="questionContainer hide">
<div id="resultKeeper">
</div>
</div>
<div id="progressKeeper">
<div id="progress">
</div>
</div>
<div id="notice">
Selecteer een optie
</div>
</div>
<link rel="stylesheet" href="style.css"/>
<script src='js/jquery.js'></script>
<script src="js/script.js"></script>
</body>
</html>
JS
$(function(){
var progress = $('#progress'),
progressKeeper = $('#progressKeeper'),
notice = $("#notice"),
progressWidth = 548,
answers= quiz.answers,
userAnswers = [],
questionLength= answers.length,
questionsStatus = $("#questionNumber")
questionsList = $(".question");
function checkAnswers() {
var resultArr = [],
flag = false;
for (i=0; i<answers.length; i++) {
if (answers[i] == userAnswers[i]) {
flag = true;
}
else {
flag = false;
}
resultArr.push(flag);
}
return resultArr;
}
function roundReloaded(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
function judgeSkills(score) {
var returnString;
if (score==100) returnString = "Einstein!"
else if (score>90) returnString = "Uitstekend!"
else if (score>70) returnString = "Netjes!"
else if (score>50) returnString = "Aanvaardbaar."
else if (score>35) returnString = "Nou, dat was slecht."
else if (score>20) returnString = "Vreselijk!"
else returnString = "Schaam je!"
return returnString;
}
progressKeeper.hide();
notice.hide();
$("#main-quiz-holder input:radio").attr("checked", false);
$('.answers li input').click(function() {
$(this).parents('.answers').children('li').removeClass("selected");
$(this).parents('li').addClass('selected');
});
$('.btnStart').click(function(){
$(this).parents('.questionContainer').fadeOut(500, function(){
$(this).next().fadeIn(500, function(){ progressKeeper.show(); });
});
questionsStatus.text("");
return false;
});
$('.btnNext').click(function(){
var tempCheck = $(this).parents('.questionContainer').find('input[type=radio]:checked');
if (tempCheck.length == 0) {
notice.fadeIn(300);return false;
}
notice.hide();
$(this).parents('.questionContainer').fadeOut(500, function(){
$(this).next().fadeIn(500);
});
progress.animate({ width: progress.width() + Math.round(progressWidth/questionLength), }, 500 );
return false;
});
$('.btnPrev').click(function(){
notice.hide();
$(this).parents('.questionContainer').fadeOut(500, function(){
$(this).prev().fadeIn(500)
});
progress.animate({ width: progress.width() - Math.round(progressWidth/questionLength), }, 500 );
return false;
});
$('.btnShowResult').click(function(){
var tempCheck = $(this).parents('.questionContainer').find('input[type=radio]:checked');
if (tempCheck.length == 0) {
notice.fadeIn(300);return false;
}
var tempArr = $('input[type=radio]:checked');
for (var i = 0, ii = tempArr.length; i < ii; i++) {
userAnswers.push(tempArr[i].getAttribute('data-key'));
}
progressKeeper.hide();
var results = checkAnswers(),
resultSet = '',
trueCount = 0,
answerKey = ' Juiste antwoorden: <br />',
score;
for (var i = 0, ii = results.length; i < ii; i++){
if (results[i] == true) trueCount++;
resultSet += '<div class="resultRow"> Vraag #' + (i + 1) + (results[i]== true ? "<div class='correct'><span>Correct</span></div>": "<div class='wrong'><span>Fout</span></div>") + "</div>";
answerKey += (i+1) +" : "+ answers[i] +' ';
}
score = roundReloaded(trueCount / questionLength*100, 2);
answerKey = "<div id='answer-key'>" + answerKey + "</div>";
resultSet = '<h2 class="qTitle">' +judgeSkills(score) + ' Behaalde cijfer '+score+'%</h2>' + resultSet + answerKey;
$('#resultKeeper').html(resultSet).show();
$(this).parents('.questionContainer').fadeOut(500, function(){
$(this).next().fadeIn(500);
});
return false;
});
})
//antwoorden van quiz
var quiz = { answers: [ 'b', 'c', 'd' ] }
我也看过youmightnotneedjquery.com，但没有成功。
Codepen： http://codepen.io/anon/pen/LVymKY
答案 0 :(得分：0)
可能没有动画，有可能这样，也有效：
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function calc() {
var questionsLength = questions.length;
var score = document.querySelectorAll("#questions input.c:checked").length;
alert("You have scored " + score + " out of " + questionsLength + ".");
}
var questions = [{
question: "What is 2*5?",
choices: [2, 5, 10, 15, 20],
correctAnswer: 2
}, {
question: "What is 3*6?",
choices: [3, 6, 9, 12, 18],
correctAnswer: 4
}, {
question: "What is 8*9?",
choices: [72, 99, 108, 134, 156],
correctAnswer: 0
}, {
question: "What is 1*7?",
choices: [4, 5, 6, 7, 8],
correctAnswer: 3
}, {
question: "What is 8*8?",
choices: [20, 30, 40, 50, 64],
correctAnswer: 4
}];
ready(function () {
finalHtml = "";
for (var question in questions) {
finalHtml += '<li>';
finalHtml += '<strong>' + questions[question].question + '</strong>';
finalHtml += '<ul>';
for (var answer in questions[question].choices)
finalHtml += '<li><label><input type="radio" name="a-' + question + '" value="' + ((questions[question].correctAnswer == answer) ? '1' : '0') + '" class="' + ((questions[question].correctAnswer == answer) ? 'c' : 'w') + '"> ' + questions[question].choices[answer] + '</label></li>';
finalHtml += '</ul>';
}
document.getElementById("questions").innerHTML = finalHtml;
});* {font-family: 'Segoe UI', sans-serif;}
#questions,
#questions li {margin: 0; padding: 0; list-style: none;}
#questions > li {margin: 0 0 10px;}
#questions ul {padding-left: 15px;}
#questions li label {display: block; cursor: pointer;}<ul id="questions">
</ul>
<button onclick="calc();">Calculate</button>
我已经给出了实现或解析JSON的基本方法。你需要找出下一步的方法！