Quiz berupa soal pilihan gandadapat dibuat menggunakan Javascript, HTML dan CSS, Quiz ini memiliki 4 atau 5 opsi jawaban dan hanya satu opsi jawaban yang benar.
Quiz ini bisa digunakan sebagai soal pertanyaan sebuah pertanyaan yang berupa pilihan ganda bersifat online maupun offline. untuk yang online ketika selesai akan ditampilkan nilai serta jawaban yang benar maupun yang salah, namun dapat juga hanya ditampilkan nilainya tanpa menyertakan jawaban benar salahnya. Untuk soal yang offline dapat dicetak dengan variasi soal yang berbeda-beda atau dibuat perkaet dengan jawaban dan soal yang berbeda-beda (soal diacak, tiap siswa mendapatkan lembar soal yang berbeda-beda.
A. Membuat Game Quiz dengan Html, JavaScript, CSS
Buat Struktur Folder Quiz
- Buat Folder baru dengan nama Quiz
- Buat index.html masukkan File html kedalam folder Quiz
- Buat script.js masukkan File JavaScript kedalam folder Quiz
- Buat style.css masukkan File css kedalam folder Quiz
Membuat index.html
<!DOCTYPE html>
<html>
<head>
<title>QUIZ SYAIFLASH</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" type="text/css" href="style.css">
</head>
<body>
<div class="quiz-container">
<h1>QUIZ SYAIFLASH</h1>
<div id="question-container">
<p id="question-text"></p>
<div id="answer-buttons"></div>
</div>
<div id="controls-container">
<button id="start-button">Mulai</button>
<div id="timer-container">
<span id="timer-text">Sisa Waktu: <span id="timer">0</span></span>
</div>
</div>
</div> <script type="litespeed/javascript" data-src="script.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://codewithcurious.com/wp-content/litespeed/js/76c21a3b41f31a3feaf6f6778d9d860a.js?ver=ca1e7"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>Membuat script.js
//www.syaiflash.com
// Buat atau ganti Quiz sesuai dengan quiz yang diinginkan
const quizQuestions = [
//No.1
{
question: "Siapa yang ditemukan sebagai penemu bola lampu pijar?",
options: ["Nikola Tesla", "Thomas Edison", "Alexander Graham Bell", "Albert Einstein"],
correctAnswer: "Thomas Edison"
},
//No.2
{
question: "Ibukota Australia adalah...",
options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
correctAnswer: "Canberra"
},
//No.3
{
question: "Gunung tertinggi di dunia adalah...",
options: ["Gunung Fuji", "Gunung Kilimanjaro", "Gunung Everest", "Gunung Merapi"],
correctAnswer: "Gunung Everest"
},
//No.4
{
question: "Negara manakah yang memiliki populasi terbanyak di dunia?",
options: ["Amerika Serikat", "India", "China", "Indonesia"],
correctAnswer: "China"
},
//No.5
{
question: "Apa nama planet terbesar di tata surya?",
options: ["Mars", "Bumi", "Jupiter", "Saturnus"],
correctAnswer: "Jupiter"
}
];
// Variabel untuk melacak status kuis
let currentQuestionIndex = 0;
let score = 0;
let timeLeft = 30;//ganti waktu sesuai yang diinginkan
let timerInterval;
// Berfungsi untuk memulai kuis
function startQuiz() {
// Sembunyikan tombol mulai dan tampilkan pertanyaan pertama
document.getElementById("start-button").style.display = "none";
displayQuestion();
startTimer();
}
// Berfungsi untuk menampilkan pertanyaan dan pilihannya
function displayQuestion() {
const currentQuestion = quizQuestions[currentQuestionIndex];
const questionText = document.getElementById("question-text");
const answerButtons = document.getElementById("answer-buttons");
// Hapus opsi pertanyaan dan jawaban sebelumnya
questionText.innerHTML = "";
answerButtons.innerHTML = "";
// Tampilkan pertanyaan saat ini
questionText.innerHTML = currentQuestion.question;
// Buat tombol jawaban untuk setiap opsi
currentQuestion.options.forEach(option => {
const button = document.createElement("button");
button.innerText = option;
button.classList.add("answer-button");
answerButtons.appendChild(button);
// Tambahkan pendengar acara klik untuk memeriksa jawabannya
button.addEventListener("click", function() {
checkAnswer(option);
});
});
}
// Berfungsi untuk memeriksa jawaban yang dipilih
function checkAnswer(selectedOption) {
const currentQuestion = quizQuestions[currentQuestionIndex];
// Periksa apakah jawaban yang dipilih sudah benar
if (selectedOption === currentQuestion.correctAnswer) {
score++;
}
// Pindah ke pertanyaan berikutnya atau akhiri kuis jika semua pertanyaan telah terjawab
currentQuestionIndex++;
if (currentQuestionIndex < quizQuestions.length) {
displayQuestion();
} else {
endQuiz();
}
}
// Function to start the timer
function startTimer() {
timerInterval = setInterval(function() {
timeLeft--;
// Update the timer text
document.getElementById("timer").textContent = timeLeft;
// End the quiz if time runs out
if (timeLeft <= 0) {
endQuiz();
}
}, 1000);
}
// Function to end the quiz
function endQuiz() {
// Stop the timer
clearInterval(timerInterval);
// Calculate the score percentage
const scorePercentage = (score / quizQuestions.length) * 100;
// Display the final score
const questionContainer = document.getElementById("question-container");
questionContainer.innerHTML = `
<h2>Quiz Selesai</h2>
<p>Nilai: ${score} out of ${quizQuestions.length}</p>
<p>Persen Nilai: ${scorePercentage}%</p>
`;
}
// Add event listener to start the quiz when the start button is clicked
document.getElementById("start-button").addEventListener("click", startQuiz);Membuat style.css
/* codewithcurious.com */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.quiz-container {
max-width: 500px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
text-align: center;
}
#question-container {
margin-bottom: 20px;
}
#question-text {
font-size: 18px;
margin-bottom: 10px;
}
#answer-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
button {
height: 40px;
font-size: 16px;
background-color: #eaeaea;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #d2d2d2;
}
#controls-container {
display: flex;
justify-content: space-between;
align-items: center;
}
#timer-container {
display: flex;
align-items: center;
}
#timer-text {
font-size: 14px;
}
#timer {
font-weight: bold;
margin-left: 5px;
}B. Membuat Game Quiz dengan Examview
Langkah-langkah Membuat Game Quiz dengan examview
- Buat fie examview, Untuk membua file examview yang berextensi tst dapat mengikuti artikel disini
- Merubah file examview menjadi html caranya lihat dibawah
- mengonlinkan soal examview yang telah menjadi html
Merubah file examview tst menjadi html
1.Buka file tst kemudian Klik File –> Export –> HTML
2.Setting Pengaturan html
Ada 2 bagian yang harus diisi. Bagian A dan bagian B (lihat gambar).
- Bagian A. Pada kotak isian Tittle: diisi dengan judul tes. Pada contoh diisi dengan “Ulangan harian ke-1”.
- Bagian B. Pengaturan bagian B, berfungsi untuk mengatur cara penyajian tes. Ada dua pilihan.
- Pilihan 2, jika hasil tes akan dikirimkan melalui email guru. Kemdian siswa akan melihat skor. Jangan lupa untuk mengisi nama guru pada kotak isian Formal name: dan email guru pada kotak isian Email.
- Pilihan 1, jika tes disajikan “tanpa skoring”. Setelah soal di jawab, siswa akan melihat pembahasan soal dan kunci jawabannya.
Menyimpan File HTML
Isi nama file web tes pada kotak isian File name. Pastikan nama file tidak menggunakan spasi. Seperti pada contoh, nama file tes diisi dengan UlanganHarian1.
Klik tombok OK.
Tampilan soal ujian berbasis web akan seperti ini
Hasil Demo Quiz Klik disini
C. Variasi Game quiz Html, JavaScript, Css Lainnya
Buat Struktur Folder Quiz
- Buat Folder baru dengan nama Quiz
- Buat index.html masukkan File html kedalam folder Quiz
- Buat script.js masukkan File JavaScript kedalam folder Quiz
- Buat style.css masukkan File css kedalam folder Quiz
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Quiz Matematika </title>
<link type='text/css' rel='stylesheet' href='style.css'/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
</head>
<body>
<div id='container'>
<div id='title'>
<h1>Quiz Javascript</h1>
<berjalan></berjalan>
</div>
<br/>
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</a></div>
<div class='button' id='start'> <a href='#'>Start Over</a></div>
<!-- <button class='' id='next'>Next</a></button>
<button class='' id='prev'>Prev</a></button>
<button class='' id='start'> Start Over</a></button> -->
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript" src='questions.json'></script>
<script type='text/javascript' src='jsquiz.js'></script>
</body>
</html>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="index.js"></script>
<script>var text="Jawab Pertanyaan Dibawah Ini Dengan Baik Dan Benar !";
var word = text.split("");
var i = 0;
var interval = setInterval(writeText, 100 );
function writeText() {
var berjalan = document.getElementsByTagName("berjalan")[0];
if (i < word.length) {
berjalan.innerHTML += word[i];
i++;
}
}</script>
</body>
</html>
script.js
(function() {
var questions = [{
question: "Berapa 2*5?",
choices: [2, 5, 10, 15, 20],
correctAnswer: 2
}, {
question: "Berapa Hasil dari 3*6?",
choices: [3, 6, 9, 12, 18],
correctAnswer: 4
}, {
question: "Berapa Hasil dari 8*9?",
choices: [72, 99, 108, 134, 156],
correctAnswer: 0
}, {
question: "Berapa Hasil dari 1*7?",
choices: [4, 5, 6, 7, 8],
correctAnswer: 3
}, {
question: "Berapa Hasil 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>Pertanyaan ' + (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="answer" 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="answer"]: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('Kamu Menjawab ' + numCorrect + ' pertanyaan dari ' +
questions.length + ' Soal Yang Ada.');
return score;
}
})()
body {
font-family: Open Sans;
}
h1 {
text-align: center;
}
#title {
text-decoration: underline;
}
Buat style.css
#quiz {
text-indent: 10px;
display:none;
}
.button {
border:4px solid;
border-radius:5px;
width: 40px;
padding-left:5px;
padding-right: 5px;
position: relative;
float:right;
background-color: #DCDCDC;
color: black;
margin: 0 2px 0 2px;
}
.button.active {
background-color: #F8F8FF;
color: #525252;
}
button {
position: relative;
float:right;
}
.button a {
text-decoration: none;
color: black;
}
#container {
width:50%;
margin:auto;
padding: 0 25px 40px 10px;
background-color: #827b7f;
border:4px solid #B0E0E6;
border-radius:5px;
color: #FFFFFF;
font-weight: bold;
box-shadow: 5px 5px 5px #888;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#prev {
display:none;
}
#start {
display:none;
width: 90px;
}
#berjalan{font-family: Roboto;font-weight: bold;font-size: 20px;transition-duration: 0.0.5s;}
Hasil Demo Quiz Klik disini
Leave a Reply