A

PROJECT REPORT
ON

Online Quiz Using CSS

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR
THE
AWARD OF
DIPLOMA IN
COMPUTER ENGINEERING

SUBMITTED TO
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI
SUBMITTED BY
Name of Student Enrollment No

1] Choudhari Siddhi Nitin 23212310219

GUIDED BY : Prof. Gaykar R.H.

SAMARTH POLYTECHNIC, BELHE

1
 CETIFICATE
This is to certify that the project report entitled “Online Quiz Using
CSS” was successfully completed by Student of fifth semester Diploma in
Computer Engineering.

Name of Student:
1] Choudhari Siddhi Nitin

In partial fulfillment of the requirements for the award of the Diploma in

Computer engineering and submitted to the Department of Computer of
Samarth Polytechnic, Belhe work carried out during a period for the
academic year 2024-25 as per curriculum.

Prof. Gaykar R.H Prof. Nawale S.K Prof. Kapile A.S

(Subject Teacher) (H.O.D) (Principal)

2
 Acknowledgement
This project is done as a semester project, as a part course titled
“Online Quiz Using CSS”.

I am really thankful to our course the Principal Prof. Kapile A.S. and
the HOD Prof. Nawale S.K. Samarth Polytechnic, Belhe for his invaluable
guidance and assistance, without which the accomplishment of the task would
have never been possible.
I also thanks Prof. Gaykar R.H. for giving this opportunity to explore
into the real world and realize the interrelation without which a Project can
never progress. In this present project I have chosen the topic
“Online Quiz Using CSS”.
I am also thankful to parents, friend and all staff of Computer
Engineering Department, for providing us relevant information and
necessary clarifications, and great support.

Name of Student:
1] Choudhari Siddhi Nitin

ANNEXURE II

Evaluation Sheet for Micro Project

Diploma in Computer Engineering

Academic Year: -2024-25

Name of Faculty: - Prof. Gaykar R. H. Course: -Computer Engineerig
Course Code: -22447 Semester: - V

3
 Title of Project: - “ Online Quiz Using CSS”
CO’s addressed by the Micro Project:
- 1.
2.
3.
4.
Major Learning Outcomes achieved by students by doing the project:-

a) Practical Outcomes:-
…………………………...……………………..…………………….
………………………………………………………….….………………….…….……..……………

b) Unit Out comes in Cognitive domain:-

………………………………….……………..……
…………………………………………………......................................................................................
………………………………………………………………………………………….………………

c) Out comes in Affective Domain:-

…………….………………………………..……………
…………………………………………………………………………………..………………………
………………………………………………………………………………..……..………….…

Comments/suggestions about team work/leadership/inter-personal communication (if any):-

…………………………….…………………………………………………………………………
…………………….…………………………………………………………………………………

Roll Name of Student Marks out of 6 for Marks out of 4 Total Out
No. performance in for oral / of 10
group activity presentation

58 Choudhari Siddhi Nitin

4
Prof. Gaykar R.H.

(Name & Signature of Faculty)

5
Index

6
 Sr. No Topic Page. No

1 Introduction 1

2 Technology stack 2

3 Quiz Interface Design 4

4 Algorithm 5

5 Flowchart 6

6 Program Code 7

7 Output 16

8 Conclusion 18

9 Reference 19
 Introduction

The "Online Quiz Using CSS" project is an innovative web application

designed to provide an engaging and interactive quiz experience. This
application allows users to test their knowledge across various topics, including
environmental and general knowledge, through a well-structured and visually
appealing interface. The use of HTML, CSS, and JavaScript in its development
ensures a responsive and user-friendly experience.

The quiz incorporates a dynamic progress bar that updates as users navigate
through questions. This feature provides real-time feedback on quiz progression,
helping users track their progress and stay motivated. The use of JavaScript
enables smooth transitions between questions and interactive elements, such as
instant feedback on selected answers.

6
One of the key features of the project is the immediate feedback system. After
each question, users receive instant confirmation of whether their answer was
correct or incorrect, along with a score update. This real-time interaction not
only makes the quiz more engaging but also reinforces learning by providing
immediate reinforcement or correction.

Overall, the "Online Quiz Using CSS" project exemplifies how modern web
technologies can be leveraged to create an educational tool that is both
functional and visually appealing. It highlights the effective integration of CSS
and JavaScript to deliver a seamless and enjoyable user experience, making it a
valuable tool for learning and self-assessment.

Technology Stack

1. HTML (Hypertext Markup Language) :

- Role : Defines the structure and content of the quiz page, including the
layout, form elements, and containers for questions, answers, and results.
- Usage : Creates the basic framework of the quiz interface and ensures that
content is semantically organized.

2. CSS (Cascading Style Sheets) :

- Role: Styles the quiz elements to create a visually appealing and user-
friendly interface.
- Usage: Applies styles to the quiz container, buttons, progress bar, and other
elements to enhance the overall look and feel of the application.

7
3. JavaScript:

- Role: Adds interactivity and dynamic functionality to the quiz.

- Usage: Loading Questions: Dynamically loads and displays questions
and answers from a predefined data array (`quiz Data`).
- Navigation : Handles navigation between questions, updates the progress
bar, and manages the display of results.
- User Feedback : Provides immediate feedback on answer selection
and calculates the final score.

4. Browser Compatibility :

- Role : Ensures that the quiz functions correctly across different web browsers
and devices.
- Usage : HTML, CSS, and JavaScript are all standardized technologies
supported by modern web browsers.

5. Development Tools :

- Text Editor/IDE : Used for writing and editing HTML, CSS, and
JavaScript code. Examples include Visual Studio Code, Sublime Text, or any
other code editor.
- Browser Developer Tools : Used for testing, debugging, and inspecting
the quiz application in different browsers.

6. Version Control (Optional) :

- Role : Tracks changes and versions of the codebase.

- Usage : Tools like Git can be used to manage version control and collaborate
with others if needed.

8
 Quiz Interface Design

1. Layout and Structure :

- The main area of the quiz is the Quiz Container, designed to be 80% of the
viewport's width and centered for a clean presentation. It features a white
background (`fff`) for contrast against the soft blue outer background, rounded
corners with an 8px radius, and a subtle box shadow (`0 0 10px rgb(0, 0, 0, 0.1)`)
to give a sense of depth. The container is padded (20px) to ensure comfortable
spacing around the content.

2. Color Scheme :

9
- The quiz uses a calm and contrasting color scheme. The background color is a soft
blue (`f0f8ff`), providing a serene visual setting. The text is dark gray (`333`),
ensuring high contrast for readability. Interactive elements like buttons and the
progress bar use a green (`4caf50`), symbolizing progress and success. On hover,
the green deepens slightly to (`45a049`), signaling interactivity.

3. Progress Bar :

- The progress bar provides a visual indicator of quiz completion. The base of the
progress bar is light gray (`ddd`), and the progress is indicated by a green bar
(`4caf50`) that fills as the user advances through the quiz.

4. Question Presentation :

- Each question is presented clearly in the Question Container, with sufficient spacing
to avoid clutter. Answer options are displayed as radio buttons, allowing the user to
select one choice per question. Each option is clearly labeled, and the design
ensures enough spacing between each answer for easy selection without visual
confusion.

5. Buttons :

- The Next Question button and the Previous Question button enable seamless
navigation between questions. These buttons are styled in green (`4caf50`),
consistent with the progress bar. On hovering, the button color changes to a darker
shade of green (`45a049`), providing feedback. The text on the "Next" button
dynamically changes to "Finish Quiz" on the final question, signaling the end of
the quiz. The "Previous Question" button is hidden on the first question and
reappears when the user moves back through the quiz.

6. Responsive Design :

10
 - The quiz interface is fully responsive, ensuring a smooth user experience across
different devices, including desktops, tablets, and mobile phones. The quiz
container resizes to fit various screen sizes while maintaining a centered layout.
Text and buttons are proportionally adjusted to ensure readability and usability
across all screen sizes.

Algorithm

Step 1: Start
Step 2: link the style. Css & script. Js file with html file using <link>tag.
Step 3: Display the text as quiz App.
Step 4: create a ‘start quiz ‘ button.
Step 5: create a time left span with timer function.
Step 6: When user click on start quiz button it display first question and start the
reverse timer from 30 seconds
Step 7: After solving all question, it display score, percentage & time taking to solve
The quiz.
Step 8: If time get left it goes to fail.
Step 9: Stop.

Flowchart

11
 Program Code
Quiz.html

<!DOCTYPE html>

<html>

12
<head>

<title>Quiz App</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 App</h1>

<div id="question-container">

<p id="question-text"></p>

<div id="answer-buttons"></div>

</div>

<div id="controls-container">

<button id="start-button">Start Quiz</button>

<div id="timer-container">

<span id="timer-text">Time Left: <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

13
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(qa,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.background Image=a,n=n,(t=t,
(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.c
allback_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,

14
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]={backgro
undImage: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)}func
tion 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.cont
ainer,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.addEvent
Listener("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&&"Intersectio nObserver"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_sr
cset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bghidpi",data_bg_multi:"bg-
multi",data_bg_multi_hidpi:"bg-

15
multihidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeedloading"
,class_loaded:"litespeedloaded",class_error:"error",class_entered:"entered",class_exited:"
exited",unobserve_com pleted:!0,unobserve_entered:!1,cancel_on_exit:!
0,callback_enter:null,callback_exit:null,c
allback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callb
ack_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="po
ster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt
="data- ",bt="llstatus",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e)
{m(t,fu nction(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))},VI
DEO: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,I
FRAME: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)}
(wind ow,document);</script><script data-no-optimize="1">var
litespeed_vary=document.cookie.replace(/(?:(?:^|.;\s)_lscache_vary\s*\=\s*([^;]).$)|^.$/,"
");litespeed_vary||fetch("/wp- content/plugins/litespeedcache/guest.vary.php",
{method:"POST",cache:"nocache",redirec
t:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty( "reload")&&"
yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.ref

16
errer),window.location.reload(!0))});</script><script data-optimized="1"
type="litespeed/javascript" data-
src="https://codewithcurious.com/wpcontent/litespeed/js/652a036b23dc7e58ae473288ee
28ce90.js?ver=2dbe8"></script><scri pt>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_lo
ad_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-
litespeedsrc]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-
litespeedsrc"))}),"loading"==document.readyState?window.addEventListener("DOMCon
tentLoad
ed",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("e
rror",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("datasrc"==e?"sr
c":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!
d.src&&t.textContent&&(d.src=litespeed_inline2src(t.text Content),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

/* codewithcurious.com */ body
{
background-color: #f2f2f2;
font-family: Arial, sans-serif;
display: flex; justify-content:

17
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;

18
} #timer { font-
weight: bold;
margin-left: 5px;
}

Script.js

//codewithcurious.com //
Define an array of quiz
questions
const quizQuestions = [
{ question: "What is the capital of France?",
options: ["Paris", "London", "Berlin", "Rome"],
correctAnswer: "Paris"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Venus", "Mars", "Jupiter", "Saturn"],
correctAnswer: "Mars"
},
{
question: "What is the chemical symbol for gold?",
options: ["Au", "Ag", "Cu", "Fe"], correctAnswer:
"Au"
} ];

// Variables to track quiz state

let currentQuestionIndex = 0;
let score = 0; let
timeLeft = 30;
let timerInterval;

// Function to start the quiz function

startQuiz() {
// Hide the start button and display the first question
document.getElementById("start-button").style.display = "none";
displayQuestion(); startTimer();
}
19
// Function to display a question and its options function
displayQuestion() {
const currentQuestion = quizQuestions[currentQuestionIndex];
const questionText = document.getElementById("question-text");
const answerButtons = document.getElementById("answer-buttons");

// Clear previous question and answer options

questionText.innerHTML = "";
answerButtons.innerHTML = "";

// Display the current question

questionText.innerHTML = currentQuestion.question;

// Create answer buttons for each option

currentQuestion.options.forEach(option => {
const button =
document.createElement("button");
button.innerText = option;
button.classList.add("answer-button");
answerButtons.appendChild(button);

// Add click event listener to check the answer

button.addEventListener("click", function() {
checkAnswer(option);
});
});
}
// Function to check the selected answer function
checkAnswer(selectedOption) { const currentQuestion =
quizQuestions[currentQuestionIndex];

// Check if the selected answer is correct if

(selectedOption === currentQuestion.correctAnswer) {
score++; }

// Move to the next question or end the quiz if all questions are
answered currentQuestionIndex++;

if (currentQuestionIndex < quizQuestions.length) {

displayQuestion();
} else {
20
 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 Completed!</h2>
<p>Your Score: ${score} out of ${quizQuestions.length}</p>
<p>Score Percentage: ${scorePercentage}%</p>
`;
}

// Add event listener to start the quiz when the start button is clicked
document.getElementById("start-button").addEventListener("click", startQuiz);

21
Output

22
23
 Conclusion
The development of the Online Quiz Using CSS project effectively demonstrates
the ability to create a dynamic, engaging, and user-friendly quiz platform using
modern web technologies. The project achieved its primary objectives of
delivering an interactive quiz experience with smooth navigation, accurate
answer validation, and score calculation. Through the use of HTML for
structure, CSS for design, and JavaScript for functionality, the quiz interface
was made visually appealing and intuitive, ensuring a seamless user experience.

The project’s responsive design ensured that the quiz could be accessed across
various devices and screen sizes, enhancing its usability and reach. This was
achieved through thoughtful CSS media queries and flexible layouts, ensuring
that users could interact with the quiz comfortably on both mobile and desktop
platforms. Additionally, by incorporating accessibility features such as keyboard
navigation and ARIA labels, the quiz application was made more inclusive,
adhering to modern web standards.

Despite the challenges encountered, particularly in dynamic question handling

and real-time progress tracking, these were successfully addressed through
robust development practices and thorough testing. The use of CSS animations
and transitions added a layer of interactivity that made the quiz more engaging
and visually appealing to users.

24
 References

• https://www.w3schools.com/css/css_quiz.asp

• https://www.geeksforgeeks.org/create-a-quiz-app-with-timer-
usinghtmlcss-and-javascript/

• https://www.codewithfaraz.com/content/161/build-a-quizapplicationwith-
html-css-and-javascript-step-by-step-guide

• https://www.tutorialspoint.com/css/css_online_quiz.htm

• https://medium.com/@codepicker57/building-an-interactive-
quizwithhtml-css-and-javascript-efe9bd8129e2

• https://techbeamers.com/html-css-quiz-for-web-developers/

• https://codingtorque.com/quiz-app-using-javascript/

25
Thank You

26