Cách tạo bài kiểm tra trực tuyến bằng html
|
Chúng tôi sẽ làm việc trên một trang cuối cùng sẽ chứa một bài kiểm tra tương tác. Để bắt đầu, chúng tôi sẽ tạo trang với các câu hỏi. Sau đó, chúng tôi sẽ thêm các thành phần biểu mẫu. Sau đó, chúng tôi sẽ làm cho nó có tính tương tác để nó có thể chấm điểm bài kiểm tra. Trong khi chúng tôi đang ở đó, chúng tôi sẽ sử dụng nội dung bài kiểm tra để làm mới bộ nhớ của bạn về một số khái niệm JavaScript Show
Hãy bắt đầu với một trang HTML cơ bản để bắt đầu Đặt tên cho nó bất cứ thứ gì bạn muốn, miễn là nó có một. phần mở rộng html. Mở trang này trong trình duyệt. Xem nó trông như thế nào. Ngay bây giờ, đó chỉ là văn bản cơ bản Nếu bạn muốn sử dụng những hình ảnh tôi đã sử dụng trong hướng dẫn này, bạn có thể tìm thấy chúng ở đây, nhưng hãy thoải mái sử dụng bất kỳ hình ảnh nào bạn muốn để tạo các dự án của riêng bạn. Sáng tạo. Đối với Dự án câu hỏi tương tác của riêng bạn, bạn sẽ phát triển bài kiểm tra trong trang hỗ trợ Bootstrap Chào mừng đến với blog CodeWithRandom. Trong bài viết này, chúng tôi tạo ứng dụng Quiz bằng HTML, CSS và JavaScript. Chúng tôi cung cấp cho bạn mã nguồn hoàn chỉnh của ứng dụng Quiz QUẢNG CÁO QUẢNG CÁO  Mục đích chính của việc tạo ứng dụng bài kiểm tra là làm cho các khái niệm javascript rõ ràng hơn và cung cấp cho người dùng quyền truy cập vào ứng dụng web để họ có thể thực hành cho các kỳ thi cạnh tranh và nâng cao kiến thức chung của mình. Chúng tôi sẽ xây dựng một ứng dụng đố vui trong bài viết này QUẢNG CÁO Mã của Abhilash Narayan Liên kết tải xuống dự án có sẵn bên dướiNgôn ngữ được sử dụngHTML, CSS và JavaScriptLiên kết ngoài / Phụ thuộcKhông phản hồiCóBảng ứng dụng câu hỏiVideo Hướng Dẫn Làm Quiz App Sử Dụng JavascriptQUẢNG CÁO Tôi hy vọng bạn thích video hướng dẫn này, vì vậy hãy bắt đầu với cấu trúc HTML cơ bản cho Ứng dụng Quiz bằng Javascript Mã HTML cho ứng dụng đố vui
Cấu trúc HTML Chúng tôi sẽ thêm một vài liên kết đến các tệp javascript và CSS bên ngoài bên trong phần tiêu đề trước khi thêm cấu trúc vào trang web của chúng tôi. Ngoài ra, vì chúng tôi đã sử dụng Bootstrap cho dự án này, chúng tôi cần bao gồm một số liên kết Bootstrap nhất định trong đó QUẢNG CÁO Cấu trúc
Chơi bài kiểm tra không giới hạn về HTML, CSS và JavaScript – Bấm vào đây Đầu ra Html cho ứng dụng bài kiểm tra QUẢNG CÁO
Mã CSS cho ứng dụng đố vui.content {
margin-top: 54px;
}
.header {
padding: 15px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.left-title {
width: 80px;
color: #fff;
font-size: 18px;
float: left;
}
.right-title {
width: 150px;
text-align: right;
float: right;
color: #fff;
}
.quiz-body {
margin-top: 15px;
padding-bottom: 50px;
}
.option-block-container {
margin-top: 20px;
max-width: 420px;
}
.option-block {
padding: 10px;
background: aliceblue;
border: 1px solid #84c5fe;
margin-bottom: 10px;
cursor: pointer;
}
.result-question {
font-weight: bold;
}
.c-wrong {
margin-left: 20px;
color: #ff0000;
}
.c-correct {
margin-left: 20px;
color: green;
}
.last-row {
border-bottom: 1px solid #ccc;
padding-bottom: 25px;
margin-bottom: 25px;
}
.res-header {
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
padding-bottom: 15px;
}Tạo hoạt hình mũi tên cuộn bằng HTML và CSS QUẢNG CÁO Tuy nhiên, một số kiểu dáng mặc định bắt nguồn từ CSS được xác định trước trong bootstrap. Chúng tôi vừa đóng góp một số kiểu dáng bổ sung cho CSS của ứng dụng bài kiểm tra của chúng tôi. Các thành phần riêng lẻ của ứng dụng bài kiểm tra của chúng tôi sẽ có thêm một số phần đệm và lề ở đây trong tệp css của chúng tôi bằng cách sử dụng bộ chọn lớp, làm cho nó có vẻ đẹp hơn QUẢNG CÁO Đầu ra được cập nhật Với mã Html và CSS cho ứng dụng Quiz QUẢNG CÁO QUẢNG CÁO
Mã Javascript cho ứng dụng đố vui/* Created and coded by Abhilash Narayan */
/* Quiz source: w3schools.com */
var quiz = {
"JS": [
{
"id": 1,
"question": "Inside which HTML element do we put the JavaScript?",
"options": [
{
"a": "<script>",
"b": "<javascript>",
"c": "<scripting>",
"d": "<js>"
}
],
"answer": "<script>",
"score": 0,
"status": ""
},
{
"id": 2,
"question": "Where is the correct place to insert a JavaScript?",
"options": [
{
"a": "The <head> section",
"b": "The <body> section",
"c": "Both the <head> section and the <body> section are correct"
}
],
"answer": "Both the <head> section and the <body> section are correct",
"score": 0,
"status": ""
},
{
"id": 3,
"question": "What is the correct syntax for referring to an external script called 'xxx.js'?",
"options": [
{
"a": "<script href="xxx.js">",
"b": "<script name="xxx.js">",
"c": "<script src="xxx.js">"
}
],
"answer": "<script src="xxx.js">",
"score": 0,
"status": ""
},
{
"id": 4,
"question": "The external JavaScript file must contain the <script> tag.",
"options": [
{
"a": "True",
"b": "False"
}
],
"answer": "False",
"score": 0,
"status": ""
},
{
"id": 5,
"question": "How do you write "Hello World" in an alert box?",
"options": [
{
"a": "alertBox("Hello World");",
"b": "msg("Hello World");",
"c": "alert("Hello World");",
"d": "msgBox("Hello World");",
}
],
"answer": "alert("Hello World");",
"score": 0,
"status": ""
},
{
"id": 6,
"question": "How do you create a function in JavaScript?",
"options": [
{
"a": "function myFunction()",
"b": "function:myFunction()",
"c": "function = myFunction()",
}
],
"answer": "function myFunction()",
"score": 0,
"status": ""
},
{
"id": 7,
"question": "How do you call a function named "myFunction"?",
"options": [
{
"a": "call function myFunction()",
"b": "call myFunction()",
"c": "myFunction()",
}
],
"answer": "myFunction()",
"score": 0,
"status": ""
},
{
"id": 8,
"question": "How to write an IF statement in JavaScript?",
"options": [
{
"a": "if i = 5 then",
"b": "if i == 5 then",
"c": "if (i == 5)",
"d": " if i = 5",
}
],
"answer": "if (i == 5)",
"score": 0,
"status": ""
},
{
"id": 9,
"question": "Which of the following is a disadvantage of using JavaScript?",
"options": [
{
"a": "Client-side JavaScript does not allow the reading or writing of files.",
"b": "JavaScript can not be used for Networking applications because there is no such support available.",
"c": "JavaScript doesn't have any multithreading or multiprocess capabilities.",
"d": "All of the above."
}
],
"answer": "All of the above.",
"score": 0,
"status": ""
},
{
"id": 10,
"question": "How to write an IF statement for executing some code if "i" is NOT equal to 5?",
"options": [
{
"a": "if (i <> 5)",
"b": "if i <> 5",
"c": "if (i != 5)",
"d": "if i =! 5 then",
}
],
"answer": "if (i != 5)",
"score": 0,
"status": ""
},
{
"id": 11,
"question": "How does a WHILE loop start?",
"options": [
{
"a": "while i = 1 to 10",
"b": "while (i <= 10; i++)",
"c": "while (i <= 10)"
}
],
"answer": "while (i <= 10)",
"score": 0,
"status": ""
},
{
"id": 12,
"question": "How does a FOR loop start?",
"options": [
{
"a": "for (i = 0; i <= 5)",
"b": "for (i = 0; i <= 5; i++)",
"c": "for i = 1 to 5",
"d": "for (i <= 5; i++)"
}
],
"answer": "for (i = 0; i <= 5; i++)",
"score": 0,
"status": ""
},
{
"id": 13,
"question": "How can you add a comment in a JavaScript?",
"options": [
{
"a": "//This is a comment",
"b": "‚This is a comment",
"c": "<!--This is a comment-->"
}
],
"answer": "//This is a comment",
"score": 0,
"status": ""
},
{
"id": 14,
"question": "How to insert a comment that has more than one line?",
"options": [
{
"a": "/*This comment has more than one line*/",
"b": "//This comment has more than one line//",
"c": "<!--This comment has more than one line-->"
}
],
"answer": "/*This comment has more than one line*/",
"score": 0,
"status": ""
},
{
"id": 15,
"question": "What is the correct way to write a JavaScript array?",
"options": [
{
"a": "var colors = (1:"red", 2:"green", 3:"blue")",
"b": "var colors = ["red", "green", "blue"]",
"c": "var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")",
"d": "var colors = "red", "green", "blue""
}
],
"answer": "var colors = ["red", "green", "blue"]",
"score": 0,
"status": ""
},
{
"id": 16,
"question": "How do you round the number 7.25, to the nearest integer?",
"options": [
{
"a": "rnd(7.25)",
"b": "Math.round(7.25)",
"c": "Math.rnd(7.25)",
"d": "round(7.25)"
}
],
"answer": "Math.round(7.25)",
"score": 0,
"status": ""
},
{
"id": 17,
"question": "How do you find the number with the highest value of x and y?",
"options": [
{
"a": "Math.max(x, y)",
"b": "Math.ceil(x, y)",
"c": "top(x, y)",
"d": "ceil(x, y)"
}
],
"answer": "Math.max(x, y)",
"score": 0,
"status": ""
},
{
"id": 18,
"question": "What is the correct JavaScript syntax for opening a new window called "w2"?",
"options": [
{
"a": "w2 = window.new("http://www.w3schools.com");",
"b": "w2 = window.open("http://www.w3schools.com");"
}
],
"answer": "w2 = window.open("http://www.w3schools.com");",
"score": 0,
"status": ""
},
{
"id": 19,
"question": "JavaScript is the same as Java.",
"options": [
{
"a": "true",
"b": "false"
}
],
"answer": "false",
"score": 0,
"status": ""
},
{
"id": 20,
"question": "How can you detect the client’s browser name?",
"options": [
{
"a": "navigator.appName",
"b": "browser.name",
"c": "client.navName"
}
],
"answer": "navigator.appName",
"score": 0,
"status": ""
},
{
"id": 21,
"question": "Which event occurs when the user clicks on an HTML element?",
"options": [
{
"a": "onchange",
"b": "onclick",
"c": "onmouseclick",
"d": "onmouseover"
}
],
"answer": "onclick",
"score": 0,
"status": ""
},
{
"id": 22,
"question": "How do you declare a JavaScript variable?",
"options": [
{
"a": "var carName;",
"b": "variable carName;",
"c": "v carName;"
}
],
"answer": "var carName;",
"score": 0,
"status": ""
},
{
"id": 23,
"question": "Which operator is used to assign a value to a variable?",
"options": [
{
"a": "*",
"b": "-",
"c": "=",
"d": "x"
}
],
"answer": "=",
"score": 0,
"status": ""
},
{
"id": 24,
"question": "What will the following code return: Boolean(10 > 9)",
"options": [
{
"a": "NaN",
"b": "false",
"c": "true"
}
],
"answer": "true",
"score": 0,
"status": ""
},
{
"id": 25,
"question": "Is JavaScript case-sensitive?",
"options": [
{
"a": "No",
"b": "Yes"
}
],
"answer": "Yes",
"score": 0,
"status": ""
}
]
}
var quizApp = function () {
this.score = 0;
this.qno = 1;
this.currentque = 0;
var totalque = quiz.JS.length;
this.displayQuiz = function (cque) {
this.currentque = cque;
if (this.currentque < totalque) {
$("#tque").html(totalque);
$("#previous").attr("disabled", false);
$("#next").attr("disabled", false);
$("#qid").html(quiz.JS[this.currentque].id + '.');
$("#question").html(quiz.JS[this.currentque].question);
$("#question-options").html("");
for (var key in quiz.JS[this.currentque].options[0]) {
if (quiz.JS[this.currentque].options[0].hasOwnProperty(key)) {
$("#question-options").append(
" |
