How to Build a Quiz App with JavaScript: A Step-by-Step Guide

 

quiz app using JavaScript?

If so, you’re in the right place! In this comprehensive guide, we’ll walk you through the step-by-step process of building a quiz app using JavaScript.

Understanding the Basics of JavaScript Quiz App Development

Before diving into the technical details, let’s first discuss the basics of quiz app development. A quiz app is an interactive platform that allows users to test their knowledge on a particular topic or subject. The app presents a series of questions to the user, and the user answers them one by one. The app then calculates the user’s score and provides feedback on their performance.

When it comes to developing a quiz app using JavaScript, there are a few key concepts to keep in mind. First and foremost, you’ll need to have a strong understanding of JavaScript fundamentals, including variables, functions, and control structures. Additionally, you’ll need to be familiar with HTML and CSS, as these technologies will be used to create the user interface for your quiz app.

Subtitles:

  • Understanding the Basics of JavaScript Quiz App Development
  • Designing the User Interface for Your Quiz App
  • Creating the Logic and Functionality of Your Quiz App
  • Testing and Deploying Your JavaScript Quiz App
  • Enhancing Your Quiz App with Advanced Features

Designing the User Interface for Your Quiz App

Once you have a solid grasp of the technical requirements, it’s time to start designing the user interface for your quiz app. This involves creating a visually appealing and user-friendly interface that allows users to easily navigate through the quiz questions.

One of the key elements of a successful quiz app is the use of clear and concise instructions. This means providing users with a clear explanation of the rules and guidelines for the quiz, as well as any special instructions or requirements.

Another important factor to consider when designing the user interface is the overall layout and design of the app. This includes selecting the appropriate colors, fonts, and images to create an aesthetically pleasing and engaging interface.

Creating the Logic and Functionality of Your Quiz App

With the user interface in place, it’s time to focus on the logic and functionality of your quiz app. This involves creating the code that will power the quiz, including the algorithms for calculating the user’s score and providing feedback.

One of the most important aspects of quiz app development is ensuring that the app is able to accurately track the user’s progress and calculate their score. This requires careful attention to detail when it comes to designing and implementing the algorithms that power the quiz.

Another key consideration when creating the logic and functionality of your quiz app is the use of user feedback. This means providing users with immediate feedback on their performance, including correct and incorrect answers, as well as any additional information or insights that may be relevant to the quiz.

Testing and Deploying Your JavaScript Quiz App

Once you have created your quiz app, it’s important to thoroughly test and debug the app to ensure that it is functioning correctly. This involves testing your quiz app under different scenarios, including varying user inputs, network connectivity, and browser compatibility.

To test your quiz app, you can use a variety of tools, including automated testing frameworks and manual testing methods. Once you have tested and debugged your app, you can deploy it to a hosting platform, such as GitHub Pages or Netlify.

Enhancing Your Quiz App with Advanced Features

If you want to take your quiz app to the next level, there are several advanced features that you can incorporate into your app. Some of these features include:

  1. Randomized Questions: You can add a feature to randomly shuffle the questions in your quiz, which can help keep users engaged and prevent them from memorizing the order of the questions.

  2. Time Limits: Another useful feature is to add a time limit to each question, which can help create a sense of urgency and challenge for the user.

  3. Leaderboards: You can add a leaderboard feature to your quiz app, which allows users to see how their performance compares to others who have taken the quiz.

  4. Social Sharing: You can add social sharing buttons to your quiz app, which allows users to share their quiz results on social media platforms, such as Twitter and Facebook.

Keyword Clusters:

  • JavaScript Quiz App Development
  • User Interface Design
  • Quiz Logic and Functionality
  • Testing and Debugging
  • Advanced Quiz App Features
  • Randomized Questions
  • Time Limits
  • Leaderboards
  • Social Sharing

In conclusion, developing a quiz app using JavaScript can be a fun and rewarding project, but it requires careful planning and attention to detail. By following the steps outlined in this guide, you can create a high-quality quiz app that engages and challenges your users. Remember to test and debug your app thoroughly, and consider incorporating advanced features to take your quiz app to the next level. Happy coding!

Index.html

				
					<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    

    <link rel="stylesheet" type=text/css href="style.css">

     <script type="litespeed/javascript" data-src="https://kit.fontawesome.com/792cbaa3d1.js" crossorigin="anonymous"></script> 

    <title>Javascript Code Quiz!</title>
</head>



<body>
    <div id="page-container">
        <header class="quizIntro">
            <div class="hometimer container-fluid" style="color:white; background-color: black; max-width: 100%;">

                

               <a href="index.html" style="text-decoration: none; "> <button style="background-color: grey; color: white; height: 40px; width: 100px;">Home</button></a>

                

                <div id="quizContainer">
                    <div id="currentTime" class="timer" style="color: white;" class="d-flex justify-content-end time">
                    </div>
                </div>
            </div>
        </header>

        

        <section>
            <div id="questionsSection">
                <div class="container-fluid">
                    <div class="jumbotron jumbotron-fluid text-center" style="height: 100px; width: auto;">
                        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="quiz" data-src="./assets/moonstars.png">
                    </div>
                </div>
                <div class="container-fluid text-center">
                    <p class="line-1 typewriter">WELCOME TO THE JAVASCRIPT CODE QUIZ!</p>
                    <div class="card-deck">
                        <div class="card-body">
                            <p class="text">
                                You have 75 seconds to answer questions testing your knowledge of JavaScript
                                fundamentals. </p>
                            <p class="text">Incorrect answers have a 10 second penalty! </p>
                            <p class="text">Will you get
                                the high score?
                            </p>
                        </div>
                    </div>
                    <h5 class="luck mb-5" style="font-family: sans-serif;">GOOD LUCK!</h5>
                    <div class="controls">
                        <button id="startTimer" type="button" class="start-btn btn btn-light">Start
                            Quiz!</button>
                    </div>
                </div>
            </div>

            

            <ul id="questionsUl" style="color: white; background-color: black;"></ul>
    </div>
    </section>

    

    <section>
        <div class id="scoresSection">
            <ul id="highScoresUl" style="color: white; background-color: black;"></ul>
        </div>
    </section>


    

    <footer id="footer">
        
    </footer>
    </div>

     <script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script> <script type="litespeed/javascript" data-src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>  <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://dailywebdesigns.com/wp-content/litespeed/js/178f5a0c613e653e8d8d701a0d45591e.js?ver=e60bc"></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>
				
			

style.css

				
					* {
    background-color: black;
}

/* Global */
html {
    /* min-height: 100%; */
    overflow: hidden;
}

body {
    color: rgba(255,255,255,.75);
    font-family: 'Courier New', Courier, monospace;
    background-color: transparent;  
}

.line-1 { 
    position: relative;
    top: 50%;  
    width: 18em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 220%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);   
    background-color: transparent; 
}
  
/* Animation */
.typewriter {
    animation: typewriter 4s steps(44) 1s 1 normal both,
               blinkTextCursor 500ms steps(44) infinite normal;    
}

@keyframes typewriter {
    from{width: 0;}
    to{width: 22em;}
} 

@keyframes blinkTextCursor {
    from{border-right-color: rgba(74, 112, 238, 0.75);}
    to{border-right-color: transparent;}
}
 
body, .jumbotron {
    background-color: black;
    align-items: center;
}

.quiz {
    width: 900px;
}
    
ul, li, h1, p, div {
    color: white;
    background-color: black;
}

ul, li {
    text-align: center;
    list-style-type: none;
    background-color: black;
}

.card-body, p.text {
    background-color: transparent;
    color: #FFFFFF;
    font-size: 1.5rem;
    text-shadow: 2px 2px black;
    font-family: sans-serif;
}

.btn {
    background-color: cornflowerblue;
    border-color: cornflowerblue;
    color: #FFFFFF;
    cursor: pointer;
}

/* Intro section styling */
#quizIntro {
    padding-top: 70px;
}

/* Questions section styling */
ul, div#questionsSection {
    align-items: center;
    text-align: center; 
    background-color: black;
    color: white;
    font-size: 1.25em; 
    cursor: pointer;
    outline: none !important;
    border-color: #000000;
}

ul, div#questionsSection::after {
    padding-top: 140px;
}

#answerDiv {
    padding-top: 5px;
    text-align: center;
}

#scoresRow {
    padding-top: 100px;
}

/* JS created elements styling */
#h1El {
    padding-top: 140px;
    text-align: center;  
    color: cornflowerblue; 
}

#pEl {
    padding-top: 60px;
    text-align: center;
}

#pEl2 {
    text-align: center;
}

#h2El {
    padding-top: 90px;
    color: cornflowerblue;
    text-align: center;
} 

#enterInitials, input#Initials {
    text-align: center;
    background-color: black;
    color: white;
    outline: none !important;
}

ul#highScoresUl, ul#questionsUl {
    padding-top: 0px;
    text-align: center;
    align-items: center;
}

#initials {
    text-align: center;
    background-color: white;
    width: 60px;
}

#submit {
    margin-left: 10px;
    margin-bottom: 4px;
  }

#home {
    margin-bottom: 80px;
    margin-top: 120px;
}

.onomatopoetica {
    color: cornflowerblue;
}
  
#content-wrap {
    padding-bottom: .5rem; /* Footer height */
}
  
#footer, .madeWithLove {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */
    background-color: transparent;
    color: cornflowerblue;
    text-align: center;            
}

/* Smaller screens */
@media (max-width: 1050px) {
    div.hometimer {
        font-size: .85;
    }
    
    .typewriter {
        font-size: 1rem;
    }
    
    img.quiz {
        width: 350px;
    }
   
    .card-body, p.text {
        background-color: transparent;
        color: #FFFFFF;
        text-shadow: 1px 1px black;
        font-size: .85rem;
        padding: none;
        margin: none;
    }
 
    .luck {
        font-size: 1rem;
        text-shadow: 1px 1px black;
    }

    ul, div#questionsSection {
        font-size: 1rem;
        font-family: 'Courier New', Courier, monospace;
        text-align: center;
        align-items: center;
    }
     
    .madeWithLove {
        font-size: .55rem;
        font-family: 'Courier New', Courier, monospace;
    }
}
				
			

main.js

				
					// Variables

var score = 0;
var questionIndex = 0;
var currentTime = document.querySelector("#currentTime");
var timer = document.querySelector("#startTimer");
var questionsSection = document.querySelector("#questionsSection");
var quizContainer = document.querySelector("#quizContainer");
var allScores = JSON.parse(localStorage.getItem("allScores")) || [];

// Quiz time remaining

var secondsLeft = 75;

// Interval time

var holdInterval = 0;

// Penalty 10 seconds

var penalty = 10;

// Quiz questions array

var questions = [
    {
        title: "How do you create a function in JavaScript?",
        options: ["function myFunction()", "callFunction()", "var myFunction", "myFunction()"],
        answer: "function myFunction()"
    },
    {
        title: "How do you create an IF statement for executing some code if 'i' is NOT equal to 5?",
        options: ["if i=! 5 then", "if (i || 5)", "if (i != 5)", "if (i % 5)"],
        answer: "if (i != 5)"
    },
    {
        title: "How do you find the number with the highest value of x and y?",
        options: ["Math.ceil(x ,y)", "Math.max(x, y)", "Math.round(x, y)", "Math.highest(x, y)"],
        answer: "Math.max(x, y)"
    },
    {
        title: "Which event occurs when the user clicks on an HTML element?",
        options: ["onmouseclick", "onpush", "onclick", "mousepress"],
        answer: "onclick"
    },
    {
        title: "How does a FOR loop start?",
        options: ["for (i < 0; i ++ 5; i+-)", "for (i = 0; i % 5; [i])", "for (i = 0; i || 5; i+)", "for (i = 0; i < 5; i++)"],
        answer: "for (i = 0; i < 5; i++)"
    },

];

// Check questions array in console log

console.log(questions);

// Create ul for quiz questions

var ulEl = document.createElement("ul");
console.log(ulEl);
console.log(timer);
if (timer !== null) {
    timer.addEventListener("click", function () {
        if (holdInterval === 0) {
            holdInterval = setInterval(function () {
                secondsLeft--;
                currentTime.textContent = secondsLeft + " seconds";

                if (secondsLeft <= 0) {
                    clearInterval(holdInterval);
                    quizComplete();
                    currentTime.textContent = "OOOPS! OUT OF TIME!";
                }
            }, 1000);
        }
        render(questionIndex);
    });
}
console.log(questionIndex);

// Renders questions

function render(questionIndex) {

    // Clears existing data 

    questionsSection.innerHTML = "";
    ulEl.innerHTML = "";

    // Loop through questions array

    for (var i = 0; i < questions.length; i++) {
        // Appends question title only
        var userQuestion = questions[questionIndex].title;
        var userChoices = questions[questionIndex].options;
        questionsSection.textContent = userQuestion;
    }
    // New for each for question

    userChoices.forEach(function (newItem) {
        var listItem = document.createElement("li");
        listItem.textContent = newItem;
        questionsSection.appendChild(ulEl);
        ulEl.appendChild(listItem);
        listItem.addEventListener("click", (compare));
    })
}
// Event to compare options with answer

function compare(event) {
    var element = event.target;

    if (element.matches("li")) {

        var answerDiv = document.createElement("div");
        answerDiv.setAttribute("id", "answerDiv");

        // Correct condition 

        if (element.textContent == questions[questionIndex].answer) {
            score++;
            answerDiv.textContent = "Correct! The answer is:  " + questions[questionIndex].answer;
        }
        else {

            // Will deduct 10 seconds off secondsLeft for wrong answers

            secondsLeft = secondsLeft - penalty;
            answerDiv.textContent = "Wrong! The correct answer is:  " + questions[questionIndex].answer;
        }

    }
    // Question Index determines number question user is on 
    // Append page with user information

    questionIndex++;

    if (questionIndex >= questions.length) {
        quizComplete();
        answerDiv.textContent = "Finished!" + " " + "You got  " + score + "/" + questions.length + " Correct!";
    }
    else {
        render(questionIndex);
    }
    questionsSection.appendChild(answerDiv);

}
// Quiz complete clear questionsSection

function quizComplete() {
    questionsSection.innerHTML = "";
    currentTime.innerHTML = "";

    // Create h1, p elements

    var h1El = document.createElement("h1");
    h1El.setAttribute("id", "h1El");
    h1El.textContent = "Quiz Complete!"

    questionsSection.appendChild(h1El);

    var pEl = document.createElement("p");
    pEl.setAttribute("id", "pEl");

    questionsSection.appendChild(pEl);

    // Calculates time remaining and creates score

    if (secondsLeft >= 0) {
        var timeRemaining = secondsLeft;
        var pEl2 = document.createElement("p");
        clearInterval(holdInterval);
        pEl.textContent = "Your final score is: " + timeRemaining;

        questionsSection.appendChild(pEl2);
    }

    // User prompted to enter intials

    var enterInitials = document.createElement("initials");
    enterInitials.setAttribute("id", "enterInitials");
    enterInitials.textContent = "Enter your initials: ";

    questionsSection.appendChild(enterInitials);

    // Enter initials

    var userInput = document.createElement("input");
    userInput.setAttribute("type", "text");
    userInput.setAttribute("id", "initials");
    userInput.textContent = "";

    questionsSection.appendChild(userInput);

    // Submit user information

    var initialsSubmit = document.createElement("button");
    initialsSubmit.setAttribute("class", "btn btn-light");
    initialsSubmit.setAttribute("type", "submit");
    initialsSubmit.setAttribute("id", "submit");
    initialsSubmit.textContent = "Submit";

    questionsSection.appendChild(initialsSubmit);

    // Event listener to capture initials and score in local storage 

    initialsSubmit.addEventListener("click", function (event) {
        event.preventDefault();
        var initials = userInput.value;
        console.log(initials);
        if (!initials) {
            document.querySelector("#submit").textContent = "Enter a valid value!";
            console.log(initialsSubmit);
        }
        else {
            var finalScore = {
                initials: initials,
                score: timeRemaining
            }

            // Clearing HTML at #questionSection 

            document.querySelector("#questionsSection").innerHTML = "";

            // Create High Scores page heading

            var h2El = document.createElement("h2");
            h2El.setAttribute("id", "h2El");
            h2El.textContent = "High Scores!"

            // Append element to page

            questionsSection.appendChild(h2El);

            allScores.push(finalScore);
            var newScore = JSON.stringify(allScores);
            localStorage.setItem("allScores", newScore);

            // Adds score to final page

            for (let i = 0; i < allScores.length; i++) {
                const el = allScores[i].initials + " " + allScores[i].score;
                var li2 = document.createElement("li");
                li2.textContent = el;
                var ul = document.querySelector("#highScoresUl");
                ul.appendChild(li2);

            }

        }

    });
}

				
			

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top