Html, Css 및 Javascript를 사용하여 퀴즈 앱 만들기(소스 코드)

Html, Css 및 Javascript를 사용하여 퀴즈 앱 만들기(소스 코드)

2022-10-19 last update

19 minutes reading javascript beginners programming webdev
퀴즈 앱용 HTML 코드

read full article

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Quiz</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<header class="header bg-primary">
<div class="left-title">JS Quiz</div>
<div class="right-title">Total Questions: <span id="tque"></span></div>
<div class="clearfix"></div>
</header>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result" class="quiz-body">
<form name="quizForm" onSubmit="">
<fieldset class="form-group">
<h4><span id="qid">1.</span> <span id="question"></span></h4>
<div class="option-block-container" id="question-options">
</div> <!-- End of option block -->
</fieldset>
<button name="previous" id="previous" class="btn btn-success">Previous</button>
&nbsp;
<button name="next" id="next" class="btn btn-success">Next</button>
</form>
</div>
</div> <!-- End of col-sm-12 -->
</div> <!-- End of row -->
</div> <!-- ENd of container fluid -->
</div> <!-- End of content -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>


퀴즈 앱에 대한 모든 html 코드가 있습니다. 이제 퀴즈 앱에서 css 및 javascript 없이 출력을 볼 수 있습니다. 그리고 퀴즈 앱용 CSS와 자바스크립트를 작성합니다.

퀴즈 앱용 HTML 출력

미리보기 — N/A 웹사이트에서 미리보기 가능(아래 링크)

퀴즈 앱용 CSS 코드

.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;
}


퀴즈 앱용 HTML 및 CSS 코드로 업데이트된 출력

미리보기 — N/A 웹사이트에서 미리보기 가능(아래 링크)

퀴즈 앱용 자바스크립트 코드

/* 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": "&lt;script&gt;",
"b": "&lt;javascript&gt;",
"c": "&lt;scripting&gt;",
"d": "&lt;js&gt;"
}
],
"answer": "&lt;script&gt;",
"score": 0,
"status": ""
},
{
"id": 2,
"question": "Where is the correct place to insert a JavaScript?",
"options": [
{
"a": "The &lt;head&gt; section",
"b": "The &lt;body&gt; section",
"c": "Both the &lt;head&gt; section and the &lt;body&gt; section are correct"
}
],
"answer": "Both the &lt;head&gt; section and the &lt;body&gt; 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": "&ltscript href=&quot;xxx.js&quot;>",
"b": "&lt;script name=&quot;xxx.js&quot;&gt;",
"c": "&lt;script src=&quot;xxx.js&quot;&gt;"
}
],
"answer": "&lt;script src=&quot;xxx.js&quot;&gt;",
"score": 0,
"status": ""
},
{
"id": 4,
"question": "The external JavaScript file must contain the &lt;script&gt; tag.",
"options": [
{
"a": "True",
"b": "False"
}
],
"answer": "False",
"score": 0,
"status": ""
},
{
"id": 5,
"question": "How do you write &quot;Hello World&quot; in an alert box?",
"options": [
{
"a": "alertBox(&quot;Hello World&quot;);",
"b": "msg(&quot;Hello World&quot;);",
"c": "alert(&quot;Hello World&quot;);",
"d": "msgBox(&quot;Hello World&quot;);",
}
],
"answer": "alert(&quot;Hello World&quot;);",
"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 &quot;myFunction&quot;?",
"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 &quot;i&quot; 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 &lt;= 10; i++)",
"c": "while (i &lt;= 10)"
}
],
"answer": "while (i &lt;= 10)",
"score": 0,
"status": ""
},
{
"id": 12,
"question": "How does a FOR loop start?",
"options": [
{
"a": "for (i = 0; i &lt;= 5)",
"b": "for (i = 0; i &lt;= 5; i++)",
"c": "for i = 1 to 5",
"d": "for (i &lt;= 5; i++)"
}
],
"answer": "for (i = 0; i &lt;= 5; i++)",
"score": 0,
"status": ""
},
{
"id": 13,
"question": "How can you add a comment in a JavaScript?",
"options": [
{
"a": "//This is a comment",
"b": "&sbquo;This is a comment",
"c": "&lt;!--This is a comment--&gt;"
}
],
"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": "&lt;!--This comment has more than one line--&gt;"
}
],
"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:&quot;red&quot;, 2:&quot;green&quot;, 3:&quot;blue&quot;)",
"b": "var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]",
"c": "var colors = 1 = (&quot;red&quot;), 2 = (&quot;green&quot;), 3 = (&quot;blue&quot;)",
"d": "var colors = &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;"
}
],
"answer": "var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]",
"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 &quot;w2&quot;?",
"options": [
{
"a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);",
"b": "w2 = window.open(&quot;http://www.w3schools.com&quot;);"
}
],
"answer": "w2 = window.open(&quot;http://www.w3schools.com&quot;);",
"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&rsquo;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 &gt; 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(
"<div class='form-check option-block'>" +
"<label class='form-check-label'>" +
"<input type='radio' class='form-check-input' name='option' id='q" + key + "' value='" + quiz.JS[this.currentque].options[0][key] + "'><span id='optionval'>" +
quiz.JS[this.currentque].options[0][key] +
"</span></label>"
);
}
}
}
if (this.currentque <= 0) {
$("#previous").attr("disabled", true);
}
if (this.currentque >= totalque) {
$('#next').attr('disabled', true);
for (var i = 0; i < totalque; i++) {
this.score = this.score + quiz.JS[i].score;
}
return this.showResult(this.score);
}
}
this.showResult = function (scr) {
$("#result").addClass('result');
$("#result").html("<h1 class='res-header'>Total Score: &nbsp;" + scr + '/' + totalque + "</h1>");
for (var j = 0; j < totalque; j++) {
var res;
if (quiz.JS[j].score == 0) {
res = '<span class="wrong">' + quiz.JS[j].score + '</span><i class="fa fa-remove c-wrong"></i>';
} else {
res = '<span class="correct">' + quiz.JS[j].score + '</span><i class="fa fa-check c-correct"></i>';
}
$("#result").append(
'<div class="result-question"><span>Q ' + quiz.JS[j].id + '</span> &nbsp;' + quiz.JS[j].question + '</div>' +
'<div><b>Correct answer:</b> &nbsp;' + quiz.JS[j].answer + '</div>' +
'<div class="last-row"><b>Score:</b> &nbsp;' + res +
'</div>'
);
}
}
this.checkAnswer = function (option) {
var answer = quiz.JS[this.currentque].answer;
option = option.replace(/</g, "&lt;") //for <
option = option.replace(/>/g, "&gt;") //for >
option = option.replace(/"/g, "&quot;")
if (option == quiz.JS[this.currentque].answer) {
if (quiz.JS[this.currentque].score == "") {
quiz.JS[this.currentque].score = 1;
quiz.JS[this.currentque].status = "correct";
}
} else {
quiz.JS[this.currentque].status = "wrong";
}
}
this.changeQuestion = function (cque) {
this.currentque = this.currentque + cque;
this.displayQuiz(this.currentque);
}
}
var jsq = new quizApp();
var selectedopt;
$(document).ready(function () {
jsq.displayQuiz(0);
$('#question-options').on('change', 'input[type=radio][name=option]', function (e) {
//var radio = $(this).find('input:radio');
$(this).prop("checked", true);
selectedopt = $(this).val();
});
});
$('#next').click(function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(1);
});
$('#previous').click(function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(-1);
});


퀴즈 앱의 최종 출력:

미리보기 — N/A 웹사이트에서 미리보기 가능(아래 링크)

이제 JavaScript 섹션 Quiz App을 완료했습니다. 퀴즈 앱용 Html, Css 및 Javascript로 업데이트된 출력.

퀴즈 앱이 마음에 드셨으면 합니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다!

이 게시물은 간단한 HTML 및 CSS와 자바스크립트를 사용하여 퀴즈 앱을 만드는 방법을 알려줍니다. 우리가 실수하거나 혼란을 일으켰다면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드
코드 바이 – Abhilash Narayan

일부 관련 주제 -

weather-app-javascript-weather-app-using-html-css-javascript

create-header-html-create-header-html-css/

otp-input-field-html-css-otp-input-using-html-css-javascript

css-card-design-25-css-card-layout-style