学习动态测试Javascript和有问题
Learning Dynamic Quiz Javascript and have questions
我正在关注javascriptissexy并学习如何制作动态测验。我找到了别人自己的测试版本,并查看了源代码,以了解他们是如何解决问题的;在我试了一下之后我了解html/css和一些javascript代码,但需要回答一些问题。我希望有人能回答一些问题,我有关于他们的源代码。我的问题在下面。
这是完整应用程序的链接http://codepen.io/gcarino/pen/LDgtn/
下面是完整的javascript代码:
(function() {
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
}];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
choose();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
alert('Please make a selection!');
} else {
questionCounter++;
displayNext();
}
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#start').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});
var header = $('<h2>Question ' + (index + 1) + ':</h2>');
qElement.append(header);
var question = $('<p>').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answerswer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answerswer"]:checked').val();
}
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!(isNaN(selections[questionCounter]))) {
$('input[value='+selections[questionCounter]+']').prop('checked', true);
}
// Controls display of 'prev' button
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('<p>',{id: 'question'});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append('You got ' + numCorrect + ' questions out of ' +
questions.length + ' right!!!');
return score;
}
})();
我的问题:
1)对于这段代码
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
1。函数参数中的e或(e)是什么? e.p preventdefault()做什么?
1。b返回false如何在淡出动画期间暂停点击侦听器?
2)关于这段代码:function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});
var header = $('<h2>Question ' + (index + 1) + ':</h2>');
qElement.append(header);
var question = $('<p>').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
1。函数参数中的(index)是什么?我看到在函数体中使用,但不知道它在html或js代码中引用了什么。
我想现在就这样了。谢谢你的帮助。
1a - e
是一个引用事件参数的变量。e.preventDefault()
将阻止默认事件动作完成-在这种情况下,它将阻止click
动作发射。
1b -从jQuery事件处理程序返回false可以防止事件触发并防止事件冒泡。(更多信息请看这篇文章)
2如果您查看displayNext
函数,questionCounter
似乎正在跟踪问题的总数。因此,当createQuestionElement
被调用时,它被传递这个questionCounter
作为一个参数(这是正在创建的下一个问题的编号)
1.a) e
是eventObject
, e.preventDefault()
方法阻止元素的默认动作发生,在本例中是单击。
1.b) return false
在点击事件也阻止点击做默认的动作,这可能是打开一个url
2) index
是从另一个代码块发送的参数,在这种情况下,如果你检查整个代码,它说:var nextQuestion = createQuestionElement(questionCounter);
所以index在这种情况下是显示
1.a)使用e只是event的缩写。你可以传递任何你想要的变量名。e.preventDefault ();将停止事件的默认动作。在本例中,为click。
1.b)通过返回false,您将阻止代码的其余部分触发。一旦浏览器遇到返回false,它将不会执行下面的代码的其余部分。
2) Index是函数的参数。您将在调用函数时传递参数。
在本例中:
var radioButtons = createRadios(index);
通过传递问题索引来调用函数。
如你所见,
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
}]
Questions是一个数组,因此您要将索引传递给createRadio方法以引用相同的问题,从而根据提供的选项构建单选按钮。
- 我不知道我的编码有什么问题.(JavaScript)
- 什么'这个javascript代码getElementById有问题
- 页面刷新后javascript内存泄漏有问题吗?为什么?
- 循环 += 十进制变量的 javascript 有问题
- Javascript在每个有问题的控件上输出一条错误消息
- 没有按钮的Javascript滚动器有问题
- 我的javascript函数有问题,我认为是document.getElementById('vodObj
- 什么'这个Javascript函数的输出有问题
- 什么'我的JavaScript幻灯片有问题
- 有一些JavaScript问题,for loop.将数字转换为其字符串值
- 这很难简明扼要地说.但是我的 if/else javascript 有问题.“如果”在“其他”发生之后不会发生
- “返回这个”的 JavaScript 函数的行为有问题
- Emacs 有问题的 JavaScript 缩进
- Javascript(不适用于Web)需要替换所有有问题的字符
- 在 JavaScript 中向上舍入数字有问题
- 我的代码有什么问题.JavaScript幻灯片
- 这段代码有什么问题?(JavaScript)
- 与Javascript骰子游戏有问题
- 什么'我的JavaScript搜索递归循环有问题
- 理解所选插件的JavaScript语法有问题,需要建议