Chào mừng bạn đến với hướng dẫn cách tạo bài kiểm tra đơn giản bằng Javascript. Vì vậy, bạn đã thành thạo các cách "xin chào thế giới" và đang tìm kiếm phần tiếp theo của hành động?
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
MỤC LỤC
TẢI XUỐNG & THỬ NGHIỆM
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
ĐƠN GIẢN ĐƠN GIẢN
TRÒ CHƠI ĐÁP ÁN JAVASCRIPT
Được rồi, bây giờ chúng ta hãy tìm hiểu chi tiết về cách thức hoạt động của trò chơi đố vui
BƯỚC 1] HTML
câu đố js. html
Đúng… Đó là tất cả cho HTML. Tất cả những gì chúng ta cần là bao gồm biểu định kiểu, Javascript và tạo một
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
BƯỚC 2] CÂU HỎI & ĐÁP ÁN
đố. js
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
Một bài kiểm tra cần những gì? . 😕 Điều này có thể gây nhầm lẫn cho người mới bắt đầu, vì vậy hãy xem kỹ
1 là một mảng các đối tượng. Tức là,// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
2// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]- Trong mỗi câu hỏi,
0// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
1 là một mảng các tùy chọn có sẵn [có thể có nhiều hơn 4]// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
2 chỉ định đâu là câu trả lời đúng. Tức là,// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
3 sẽ xác định rằng tùy chọn đầu tiên là đúng// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
BƯỚC 3] CỜ TRÒ CHƠI
đố. js
// [A2] HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
// [A3] GAME FLAGS
now: 0, // current question
score: 0, // current scoreTiếp theo, chúng ta có một loạt các thuộc tính. Những điều này sẽ khá dễ hiểu – Tham khảo các phần tử HTML và các cờ để theo dõi điểm số/câu hỏi hiện tại
BƯỚC 4] KHỞI TẠO QUIZ [XÂY DỰNG HTML]
đố. js
// [B] INIT QUIZ HTML
init: [] => {
// [B1] WRAPPER
quiz.hwrap = document.getElementById["quizWrap"];
// [B2] QUESTIONS SECTION
quiz.hqn = document.createElement["div"];
quiz.hqn.id = "quizQn";
quiz.hwrap.appendChild[quiz.hqn];
// [B3] ANSWERS SECTION
quiz.hans = document.createElement["div"];
quiz.hans.id = "quizAns";
quiz.hwrap.appendChild[quiz.hans];
// [B4] GO!
quiz.draw[];
}
window.addEventListener["load", quiz.init];// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
6 Để hiển thị câu hỏi// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
7 Để hiển thị các tùy chọn// [A] PROPERTIES // [A1] QUESTIONS & ANSWERS // Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER data: [ { q : "What is the standard distance between the target and archer in Olympics?", o : [ "50 meters", "70 meters", "100 meters", "120 meters" ], a : 1 // arrays start with 0, so answer is 70 meters }, { q : "Which is the highest number on a standard roulette wheel?", o : [ "22", "24", "32", "36" ], a : 3 }, { q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?", o : [ "400 pounds", "550 pounds", "700 pounds", "750 pounds" ], a : 2 }, { q : "Which is the seventh planet from the sun?", o : [ "Uranus", "Earth", "Pluto", "Mars" ], a : 0 }, { q : "Which is the largest ocean on Earth?", o : [ "Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean" ], a : 3 } ]
BƯỚC 5] RÚT CÂU HỎI HIỆN TẠI
đố. js
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
// [A2] HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
// [A3] GAME FLAGS
now: 0, // current question
score: 0, // current score
BƯỚC 6] CHỌN MỘT TÙY CHỌN
đố. js
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
Cuối cùng, khi người dùng chọn một tùy chọn –
// [A2] HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
// [A3] GAME FLAGS
now: 0, // current question
score: 0, // current score
THÊM] KHỞI ĐỘNG LẠI QUI
đố. js
// [A] PROPERTIES
// [A1] QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q : "What is the standard distance between the target and archer in Olympics?",
o : [
"50 meters",
"70 meters",
"100 meters",
"120 meters"
],
a : 1 // arrays start with 0, so answer is 70 meters
},
{
q : "Which is the highest number on a standard roulette wheel?",
o : [
"22",
"24",
"32",
"36"
],
a : 3
},
{
q : "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o : [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"
],
a : 2
},
{
q : "Which is the seventh planet from the sun?",
o : [
"Uranus",
"Earth",
"Pluto",
"Mars"
],
a : 0
},
{
q : "Which is the largest ocean on Earth?",
o : [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"
],
a : 3
}
]
Chỉ cần gọi
// [A2] HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
// [A3] GAME FLAGS
now: 0, // current question
score: 0, // current score// [A2] HTML ELEMENTS
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
// [A3] GAME FLAGS
now: 0, // current question
score: 0, // current score
BIT & LIÊN KẾT HỮU ÍCH
Đó là tất cả về mã và đây là một số tính năng bổ sung nhỏ có thể hữu ích cho bạn
TRÒ CHƠI JAVASCRIPT ĐƠN GIẢN
Nếu bạn muốn tìm hiểu thêm về cách tạo các trò chơi cổ điển đơn giản, hãy xem các hướng dẫn khác của tôi
- Oẳn tù tì
- bài xì dách
- TIC Tac Toe
- người treo cổ
- tàu quét mìn
LIÊN KẾT
- Ví dụ trên CodePen – Bài kiểm tra JS đơn giản
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn về những điều cơ bản của Javascript và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc
Làm cách nào để tạo trò chơi đố vui bằng JavaScript?
Định dạng bài kiểm tra JavaScript 1. Lựa chọn giữa hai lựa chọn .
Vùng chứa nền nơi văn bản và nút của bạn sẽ hiển thị
Một thùng chứa div để lưu trữ điểm số
Một vùng chứa div để hiển thị câu hỏi
Vùng chứa div chứa các lựa chọn bạn muốn cung cấp cho người dùng để chọn câu trả lời cho câu hỏi. [
Làm cách nào để tạo bài kiểm tra với các câu hỏi ngẫu nhiên bằng JavaScript?
//biến
var quiz = [];
quiz[0] = new Question["1/4 của 100 bằng bao nhiêu?", ".
quiz[1] = new Question["Máu màu gì?", ".
quiz[2] = new Question["Cỏ màu gì?", ".
quiz[3] = new Question["Con nhện có bao nhiêu chân?", ".
quiz[4] = new Question["Ai là vua của Hà Lan?", "
Làm cách nào để tạo bài kiểm tra trắc nghiệm bằng JavaScript?
InternalHTML = ''; . InternalHTML = câu hỏi;
Làm cách nào để làm cho các câu hỏi đố xuất hiện cùng một lúc trong JavaScript?
Đây là mã cho div. div. innerHTML = ` name}