“Làm cách nào để tôi thực hiện một bài kiểm tra JavaScript?” . Câu đố rất thú vị. Chúng là một cách tuyệt vời để tìm hiểu về các chủ đề mới và chúng cho phép bạn thu hút khán giả của mình bằng nội dung thú vị và vui tươi
Viết mã bài kiểm tra JavaScript của riêng bạn cũng là một bài tập học tập tuyệt vời. Nó hướng dẫn bạn cách xử lý các sự kiện, thao tác với DOM, xử lý đầu vào của người dùng, đưa ra phản hồi cho người dùng và theo dõi điểm số của họ [ví dụ: sử dụng bộ nhớ phía máy khách]. Và khi bạn thiết lập và chạy một bài kiểm tra cơ bản, sẽ có rất nhiều khả năng để thêm chức năng nâng cao hơn, chẳng hạn như phân trang. tôi đi vào vấn đề này tại
Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo bài kiểm tra JavaScript gồm nhiều bước mà bạn có thể điều chỉnh theo nhu cầu của mình và thêm vào trang web của riêng mình. Nếu bạn muốn xem những gì chúng tôi sẽ kết thúc, bạn có thể bỏ qua và xem
Để biết thêm kiến thức chuyên sâu về JavaScript và các thách thức, hãy đọc cuốn sách miễn phí của chúng tôi. Học cách viết mã bằng JavaScript
Những điều cần lưu ý trước khi bắt đầu
Một vài điều cần biết trước khi bắt đầu
- Đây là hướng dẫn về mặt trước, nghĩa là bất kỳ ai biết cách xem qua mã nguồn của trang đều có thể tìm thấy câu trả lời. Đối với các câu đố nghiêm túc, dữ liệu cần được xử lý thông qua phần cuối, điều này nằm ngoài phạm vi của hướng dẫn này
- Mã trong bài viết này sử dụng cú pháp JavaScript hiện đại [ES6+], nghĩa là mã này sẽ không tương thích với bất kỳ phiên bản Internet Explorer nào. Tuy nhiên, nó sẽ hoạt động tốt trên các trình duyệt hiện đại, bao gồm cả Microsoft Edge
- Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, tôi đã viết một bài hướng dẫn về bài kiểm tra JavaScript tương thích với IE8. Hoặc, nếu bạn muốn xem lại ES6, hãy xem khóa học này của Darin Haener trên SitePoint Premium
- Bạn sẽ cần làm quen với HTML, CSS và JavaScript, nhưng mỗi dòng mã sẽ được giải thích riêng
Cấu trúc cơ bản của bài kiểm tra JavaScript của bạn
Lý tưởng nhất là chúng tôi muốn các câu hỏi và câu trả lời của bài kiểm tra nằm trong mã JavaScript của mình và để tập lệnh của chúng tôi tự động tạo bài kiểm tra. Bằng cách đó, chúng tôi sẽ không cần phải viết nhiều đánh dấu lặp đi lặp lại và chúng tôi có thể thêm và xóa câu hỏi một cách dễ dàng
Để thiết lập cấu trúc bài kiểm tra JavaScript của chúng tôi, chúng tôi sẽ cần bắt đầu với HTML sau
- Một
5 để tổ chức bài kiểm trafunction buildQuiz[]{} function showResults[]{} // display quiz right away buildQuiz[]; // on submit, show results submitButton.addEventListener['click', showResults];
- Một
6 để nộp bài kiểm trafunction buildQuiz[]{} function showResults[]{} // display quiz right away buildQuiz[]; // on submit, show results submitButton.addEventListener['click', showResults];
- Một
5 để hiển thị kết quảfunction buildQuiz[]{} function showResults[]{} // display quiz right away buildQuiz[]; // on submit, show results submitButton.addEventListener['click', showResults];
Đây là cách nó sẽ trông như thế nào
Submit Quiz
Sau đó, chúng tôi có thể chọn các phần tử HTML này và lưu trữ các tham chiếu đến chúng trong các biến như vậy
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
Tiếp theo, chúng ta sẽ cần một cách để xây dựng bài kiểm tra, hiển thị kết quả và kết hợp tất cả lại với nhau. Chúng ta có thể bắt đầu bằng cách đặt ra các chức năng của mình và chúng ta sẽ điền chúng vào khi chúng ta tiếp tục
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
Ở đây, chúng ta có chức năng xây dựng bài kiểm tra và hiển thị kết quả. Chúng tôi sẽ chạy chức năng
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
8 của mình ngay lập tức và chúng tôi sẽ chạy chức năng function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
9 khi người dùng nhấp vào nút gửiHiển thị câu hỏi trắc nghiệm
Điều tiếp theo bài kiểm tra của chúng tôi cần là một số câu hỏi để hiển thị. Chúng tôi sẽ sử dụng các đối tượng bằng chữ để thể hiện các câu hỏi riêng lẻ và một mảng để chứa tất cả các câu hỏi tạo nên bài kiểm tra của chúng tôi. Sử dụng một mảng sẽ làm cho các câu hỏi dễ dàng lặp đi lặp lại
________số 8_______Vui lòng đặt bao nhiêu câu hỏi hoặc câu trả lời tùy thích
Ghi chú. vì đây là một mảng, các câu hỏi sẽ xuất hiện theo thứ tự được liệt kê. Nếu bạn muốn sắp xếp các câu hỏi theo bất kỳ cách nào trước khi trình bày chúng cho người dùng, hãy xem mẹo nhanh của chúng tôi về cách sắp xếp một mảng các đối tượng trong JavaScript
Bây giờ chúng tôi có danh sách các câu hỏi, chúng tôi có thể hiển thị chúng trên trang. Chúng ta sẽ đi qua từng dòng JavaScript sau để xem nó hoạt động như thế nào
function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
Đầu tiên, chúng tôi tạo một biến
const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
0 để chứa tất cả đầu ra HTML bao gồm các câu hỏi và lựa chọn trả lờiTiếp theo, chúng ta có thể bắt đầu xây dựng HTML cho từng câu hỏi. Chúng ta sẽ cần lặp lại từng câu hỏi như vậy
myQuestions.forEach[ [currentQuestion, questionNumber] => {
// the code we want to run for each question goes here
}];
Để cho ngắn gọn, chúng tôi đang sử dụng chức năng mũi tên để thực hiện các thao tác của mình đối với từng câu hỏi. Vì đây là vòng lặp forEach, nên chúng ta lấy giá trị hiện tại, chỉ mục [số vị trí của mục hiện tại trong mảng] và chính mảng đó làm tham số. Chúng tôi chỉ cần giá trị hiện tại và chỉ mục, vì mục đích của chúng tôi, chúng tôi sẽ đặt tên lần lượt là
const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
1 và const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
2Bây giờ hãy xem mã bên trong vòng lặp của chúng ta
// we'll want to store the list of answer choices
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an html radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
Đối với mỗi câu hỏi, chúng tôi sẽ muốn tạo HTML chính xác và vì vậy, bước đầu tiên của chúng tôi là tạo một mảng để chứa danh sách các câu trả lời có thể
Tiếp theo, chúng ta sẽ sử dụng một vòng lặp để điền vào các câu trả lời có thể có cho câu hỏi hiện tại. Đối với mỗi lựa chọn, chúng tôi đang tạo một nút radio HTML, mà chúng tôi đặt trong phần tử
const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
3. Điều này là để người dùng có thể nhấp vào bất kỳ đâu trên văn bản câu trả lời để chọn câu trả lời đó. Nếu nhãn bị bỏ qua, thì người dùng sẽ phải nhấp vào chính nút radio, nút này rất khó truy cậpLưu ý rằng chúng tôi đang sử dụng các mẫu chữ, là các chuỗi nhưng mạnh hơn. Chúng tôi sẽ tận dụng các tính năng sau
- khả năng đa dòng
- không còn phải trích dẫn trong dấu ngoặc kép vì thay vào đó, các mẫu chữ sử dụng backticks
- nội suy chuỗi, vì vậy bạn có thể nhúng các biểu thức JavaScript ngay vào chuỗi của mình như thế này.
4const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Which one of these is a JavaScript package manager?", answers: { a: "Node.js", b: "TypeScript", c: "npm" }, correctAnswer: "c" }, { question: "Which tool can you use to ensure code quality?", answers: { a: "Angular", b: "jQuery", c: "RequireJS", d: "ESLint" }, correctAnswer: "d" } ];
Khi chúng tôi có danh sách các nút trả lời, chúng tôi có thể đẩy HTML câu hỏi và HTML câu trả lời vào danh sách đầu ra tổng thể của chúng tôi
Lưu ý rằng chúng tôi đang sử dụng một mẫu chữ và một số biểu thức được nhúng để tạo div câu hỏi trước tiên và sau đó tạo div câu trả lời. Biểu thức
const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
5 lấy danh sách các câu trả lời của chúng ta và đặt chúng lại với nhau thành một chuỗi mà chúng ta có thể xuất ra div const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
6Bây giờ chúng tôi đã tạo HTML cho mỗi câu hỏi, chúng tôi có thể kết hợp tất cả lại với nhau và hiển thị trên trang
quizContainer.innerHTML = output.join[''];
Bây giờ hàm
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
8 của chúng ta đã hoàn thànhBạn sẽ có thể chạy bài kiểm tra vào thời điểm này và xem các câu hỏi được hiển thị. Tuy nhiên, xin lưu ý rằng cấu trúc mã của bạn rất quan trọng. Do một thứ gọi là vùng chết tạm thời, bạn không thể tham chiếu mảng câu hỏi của mình trước khi nó được xác định
Tóm lại, đây là cấu trúc chính xác
// Functions
function buildQuiz[]{ ... }
function showResults[]{ ... }
// Variables
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
const myQuestions = [ ... ];
// Kick things off
buildQuiz[];
// Event listeners
submitButton.addEventListener['click', showResults];
Hiển thị kết quả bài kiểm tra
Tại thời điểm này, chúng tôi muốn xây dựng hàm
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
9 để lặp lại các câu trả lời, kiểm tra chúng và hiển thị kết quảĐây là chức năng mà chúng ta sẽ xem xét chi tiết tiếp theo
function showResults[]{
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll['.answers'];
// keep track of user's answers
let numCorrect = 0;
// for each question...
myQuestions.forEach[ [currentQuestion, questionNumber] => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = [answerContainer.querySelector[selector] || {}].value;
// if answer is correct
if[userAnswer === currentQuestion.correctAnswer]{
// add to the number of correct answers
numCorrect++;
// color the answers green
answerContainers[questionNumber].style.color = 'lightgreen';
}
// if answer is wrong or blank
else{
// color the answers red
answerContainers[questionNumber].style.color = 'red';
}
}];
// show number of correct answers out of total
resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
}
Đầu tiên, chúng tôi chọn tất cả các vùng chứa câu trả lời trong HTML của bài kiểm tra của chúng tôi. Sau đó, chúng tôi sẽ tạo các biến để theo dõi câu trả lời hiện tại của người dùng và tổng số câu trả lời đúng
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
0Bây giờ chúng ta có thể lặp lại từng câu hỏi và kiểm tra câu trả lời
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
1Ý chính chung của mã này là
- tìm câu trả lời đã chọn trong HTML
- xử lý những gì xảy ra nếu câu trả lời là đúng
- xử lý những gì xảy ra nếu câu trả lời là sai
Hãy xem xét kỹ hơn cách chúng tôi tìm câu trả lời đã chọn trong HTML của mình
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
2Trước tiên, chúng tôi đảm bảo rằng chúng tôi đang tìm kiếm bên trong hộp chứa câu trả lời cho câu hỏi hiện tại
Trong dòng tiếp theo, chúng tôi đang xác định bộ chọn CSS sẽ cho phép chúng tôi tìm thấy nút radio nào được chọn
Sau đó, chúng tôi đang sử dụng
const myQuestions = [
{
question: "Who invented JavaScript?",
answers: {
a: "Douglas Crockford",
b: "Sheryl Sandberg",
c: "Brendan Eich"
},
correctAnswer: "c"
},
{
question: "Which one of these is a JavaScript package manager?",
answers: {
a: "Node.js",
b: "TypeScript",
c: "npm"
},
correctAnswer: "c"
},
{
question: "Which tool can you use to ensure code quality?",
answers: {
a: "Angular",
b: "jQuery",
c: "RequireJS",
d: "ESLint"
},
correctAnswer: "d"
}
];
9 của JavaScript để tìm kiếm bộ chọn CSS của chúng tôi trong function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
0 đã xác định trước đó. Về bản chất, điều này có nghĩa là chúng ta sẽ tìm thấy nút radio của câu trả lời nào được chọnCuối cùng, chúng ta có thể nhận được giá trị của câu trả lời đó bằng cách sử dụng
function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
1Xử lý đầu vào của người dùng không đầy đủ
Nhưng nếu người dùng để trống câu trả lời thì sao? . Để giải quyết vấn đề này, chúng tôi đã thêm
function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
3, có nghĩa là “hoặc”, và function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
4, là một đối tượng trống. Bây giờ tuyên bố tổng thể nói- Nhận tham chiếu đến phần tử câu trả lời đã chọn của chúng tôi HOẶC, nếu điều đó không tồn tại, hãy sử dụng một đối tượng trống
- Lấy giá trị của bất cứ thứ gì trong câu lệnh đầu tiên
Do đó, giá trị sẽ là câu trả lời của người dùng hoặc
function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
5, có nghĩa là người dùng có thể bỏ qua câu hỏi mà không làm hỏng bài kiểm tra của chúng tôiĐánh giá câu trả lời và hiển thị kết quả
Các câu lệnh tiếp theo trong vòng kiểm tra câu trả lời của chúng tôi sẽ cho phép chúng tôi xử lý các câu trả lời đúng và sai
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
3Nếu câu trả lời của người dùng khớp với lựa chọn đúng, hãy tăng số câu trả lời đúng lên một và [tùy chọn] tô màu xanh lục cho tập hợp các lựa chọn. Nếu câu trả lời sai hoặc để trống, hãy tô màu đỏ cho các lựa chọn trả lời [một lần nữa, tùy chọn]
Khi vòng kiểm tra câu trả lời kết thúc, chúng tôi có thể hiển thị số lượng câu hỏi mà người dùng đã trả lời đúng
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
4Và bây giờ chúng ta có một bài kiểm tra JavaScript đang hoạt động
Nếu muốn, bạn có thể bọc toàn bộ bài kiểm tra trong một IIFE [biểu thức hàm được gọi ngay lập tức], đây là hàm sẽ chạy ngay khi bạn xác định nó. Điều này sẽ giữ cho các biến của bạn nằm ngoài phạm vi toàn cầu và đảm bảo rằng bài kiểm tra của bạn không can thiệp vào bất kỳ tập lệnh nào khác đang chạy trên trang
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
5Bây giờ bạn đã sẵn sàng. Vui lòng thêm hoặc xóa câu hỏi và câu trả lời cũng như tạo kiểu cho bài kiểm tra theo cách bạn muốn
Tại thời điểm này, bài kiểm tra của bạn có thể trông như thế này [với một chút kiểu dáng]
Xem cây bút
Bài kiểm tra JavaScript đơn giản [Không phân trang] của SitePoint [@SitePoint]
trên CodePen
Thêm phân trang
Bây giờ chúng ta đã chạy bài kiểm tra cơ bản, hãy xem xét một số tính năng nâng cao hơn. Ví dụ: giả sử bạn chỉ muốn hiển thị một câu hỏi tại một thời điểm
Có thể bạn sẽ cần
- một cách để hiển thị và ẩn câu hỏi
- các nút để điều hướng bài kiểm tra
Chúng tôi sẽ cần thực hiện một số cập nhật, vì vậy hãy bắt đầu với HTML
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
6Hầu hết đánh dấu đó giống như trước đây, nhưng bây giờ chúng tôi đã thêm các nút điều hướng và vùng chứa bài kiểm tra. Bộ chứa bài kiểm tra sẽ giúp chúng tôi định vị các câu hỏi dưới dạng các lớp mà chúng tôi có thể hiển thị và ẩn
Tiếp theo, bên trong hàm
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
8, chúng ta cần thêm một phần tử function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
5 với lớp function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
8 để chứa các bộ chứa câu hỏi và câu trả lời mà chúng ta vừa tạoconst quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
7Tiếp theo, chúng ta có thể sử dụng một số định vị CSS để làm cho các trang trình bày xếp thành các lớp chồng lên nhau. Trong ví dụ này, bạn sẽ nhận thấy chúng tôi đang sử dụng chỉ mục z và chuyển đổi độ mờ để cho phép các trang trình bày của chúng tôi mờ dần trong và ngoài. Đây là CSS đó có thể trông như thế nào
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
8Bây giờ chúng ta sẽ thêm một số JavaScript để làm cho việc phân trang hoạt động. Như trước đây, thứ tự là quan trọng, vì vậy đây là cấu trúc sửa đổi của mã của chúng tôi
const quizContainer = document.getElementById['quiz'];
const resultsContainer = document.getElementById['results'];
const submitButton = document.getElementById['submit'];
9Chúng ta có thể bắt đầu với một số biến để lưu trữ các tham chiếu đến các nút điều hướng của mình và theo dõi xem chúng ta đang ở trang trình bày nào. Thêm những thứ này sau cuộc gọi đến
function buildQuiz[]{
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach[
[currentQuestion, questionNumber] => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for[letter in currentQuestion.answers]{
// ...add an HTML radio button
answers.push[
`
${letter} :
${currentQuestion.answers[letter]}
`
];
}
// add this question and its answers to the output
output.push[
` ${currentQuestion.question}
${answers.join['']} `
];
}
];
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join[''];
}
9, như được hiển thị ở trênfunction buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
0Tiếp theo chúng ta sẽ viết hàm trình chiếu slide. Thêm phần này bên dưới các chức năng hiện có [
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
8 và function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
9]function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
1Đây là những gì ba dòng đầu tiên làm
- Ẩn slide hiện tại bằng cách loại bỏ lớp
2myQuestions.forEach[ [currentQuestion, questionNumber] => { // the code we want to run for each question goes here }];
- Hiển thị trang chiếu mới bằng cách thêm lớp
2myQuestions.forEach[ [currentQuestion, questionNumber] => { // the code we want to run for each question goes here }];
- Cập nhật số slide hiện tại
Các dòng tiếp theo giới thiệu logic sau
- Nếu chúng ta đang ở slide đầu tiên, hãy ẩn nút Previous Slide. Nếu không, hiển thị nút
- Nếu chúng ta đang ở trang chiếu cuối cùng, hãy ẩn nút Trang trình bày Tiếp theo và hiển thị nút Gửi. Nếu không, hãy hiển thị nút Trang trình bày tiếp theo và ẩn nút Gửi
Sau khi chúng tôi đã viết chức năng của mình, chúng tôi có thể gọi ngay
myQuestions.forEach[ [currentQuestion, questionNumber] => {
// the code we want to run for each question goes here
}];
4 để hiển thị trang trình bày đầu tiên. Điều này sẽ đến sau mã phân trangfunction buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
2Tiếp theo chúng ta có thể viết các hàm để làm cho các nút điều hướng hoạt động. Chúng nằm bên dưới hàm
myQuestions.forEach[ [currentQuestion, questionNumber] => {
// the code we want to run for each question goes here
}];
5function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
3Ở đây, chúng tôi đang sử dụng chức năng
myQuestions.forEach[ [currentQuestion, questionNumber] => {
// the code we want to run for each question goes here
}];
5 để cho phép các nút điều hướng hiển thị trang trình bày trước và trang trình bày tiếp theoCuối cùng, chúng ta sẽ cần kết nối các nút điều hướng với các chức năng này. Điều này đến ở phần cuối của mã
function buildQuiz[]{}
function showResults[]{}
// display quiz right away
buildQuiz[];
// on submit, show results
submitButton.addEventListener['click', showResults];
4Bây giờ, bài kiểm tra của bạn đã có điều hướng hoạt động
Xem cây bút
Câu đố JavaScript đơn giản với phân trang theo SitePoint [@SitePoint]
trên CodePen
Cái gì tiếp theo?
Bây giờ bạn đã có một bài kiểm tra JavaScript cơ bản, đã đến lúc sáng tạo và thử nghiệm
Dưới đây là một số gợi ý bạn có thể thử
- Hãy thử những cách khác nhau để trả lời một câu trả lời đúng hoặc một câu trả lời sai
- Phong cách bài kiểm tra độc đáo
- Thêm thanh tiến trình
- Cho phép người dùng xem lại câu trả lời trước khi gửi
- Cung cấp cho người dùng bản tóm tắt câu trả lời của họ sau khi họ gửi
- Cập nhật điều hướng để cho phép người dùng bỏ qua bất kỳ số câu hỏi nào
- Tạo thông báo tùy chỉnh cho từng cấp kết quả. Ví dụ: nếu ai đó đạt điểm 8/10 trở lên, hãy gọi họ là ninja đố vui
- Thêm nút để chia sẻ kết quả lên mạng xã hội
- Lưu điểm cao của bạn bằng cách sử dụng localStorage
- Thêm đồng hồ đếm ngược để xem mọi người có thể vượt qua đồng hồ không
- Áp dụng các khái niệm từ bài viết này cho các mục đích sử dụng khác, chẳng hạn như công cụ ước tính giá dự án hoặc bài kiểm tra xã hội “bạn là nhân vật nào”
Chia sẻ bài viết này
Yaphi Berhanu
Yaphi Berhanu là một nhà phát triển web thích giúp mọi người nâng cao kỹ năng viết mã của họ. Anh ấy viết mẹo và thủ thuật tại http. //mã bước đơn giản. com. Theo ý kiến hoàn toàn không thiên vị của mình, anh ấy đề nghị kiểm tra nó