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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
//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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/* 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<pre class="lang:default decode:true " title="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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<pre class="lang:default decode:true " title="index.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; } })() |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
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