File size: 11.54Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/Bootstrap/bootstrap.min.css" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<!-- Custom Style -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- animation -->
<link rel="stylesheet" href="assets/css/animation.css" />
<!-- Responsive -->
<link rel="stylesheet" href="assets/css/responsive.css" />
<!-- result CSS -->
<link rel="stylesheet" href="assets/css/result_style.css" />
</head>
<body>
<main class="overflow-hidden">
<header>
<!-- step SLides -->
<div class="stepsSlide">
<div class="slideSingle">
<div class="fill w-100"></div>
</div>
<div class="slideSingle">
<div class="fill"></div>
</div>
<div class="slideSingle">
<div class="fill"></div>
</div>
<div class="slideSingle">
<div class="fill"></div>
</div>
<div class="slideSingle">
<div class="fill"></div>
</div>
</div>
<!-- step Numbers -->
<div class="stepNumber sm-none">
Question<span id="activeStepNumber">1</span>/5
</div>
</header>
<div class="container">
<div class="row align-items-center mt-5">
<div class="col-md-5 tab-none">
<div class="sideImg">
<img src="assets/images/avatar.png" alt="Avatar" />
</div>
</div>
<div class="offset-md-1 col-md-6 tab-100">
<!-- Quiz Start -->
<form
id="form"
novalidate
onsubmit="return false"
class="show-section"
>
<!-- Step 1 -->
<fieldset id="step1">
<div class="question">
<!-- Question -->
<h1 class="mainHeading">
Which former British colony was given back to China in 1997?
</h1>
<!-- Next Prev Button -->
<div class="nextPrev">
<button type="button" class="next" id="step1btn">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Options -->
<div
class="animateFields d-flex justify-content-between flex-wrap"
>
<div class="option">
<input type="radio" name="op1" value="Russia" />
<label>Russia</label>
</div>
<div class="option">
<input type="radio" name="op1" value="America" />
<label>America</label>
</div>
<div class="option">
<input type="radio" name="op1" value="Australia" />
<label>Australia</label>
</div>
<div class="option">
<input type="radio" name="op1" value="Hong Kong" />
<label>Hong Kong</label>
</div>
</div>
</fieldset>
<!-- Step 2 -->
<fieldset id="step2">
<div class="question">
<!-- Question -->
<h1 class="mainHeading">What is the capital of France?</h1>
<!-- Next Prev Button -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="next" id="step2btn">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Options -->
<div
class="animateFields d-flex justify-content-between flex-wrap"
>
<div class="option">
<input type="radio" name="op2" value="London" />
<label>London</label>
</div>
<div class="option">
<input type="radio" name="op2" value="Berlin" />
<label>Berlin</label>
</div>
<div class="option">
<input type="radio" name="op2" value="Paris" />
<label>Paris</label>
</div>
<div class="option">
<input type="radio" name="op2" value="Madrid" />
<label>Madrid</label>
</div>
</div>
</fieldset>
<!-- Step 3 -->
<fieldset id="step3">
<div class="question">
<!-- Question -->
<h1 class="mainHeading">
Which former British colony was given back to China in 1997?
</h1>
<!-- Next Prev Button -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="next" id="step3btn">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Options -->
<div
class="animateFields d-flex justify-content-between flex-wrap"
>
<div class="option">
<input type="radio" name="op3" value="Russia" />
<label>Russia</label>
</div>
<div class="option">
<input type="radio" name="op3" value="America" />
<label>America</label>
</div>
<div class="option">
<input type="radio" name="op3" value="Australia" />
<label>Australia</label>
</div>
<div class="option">
<input type="radio" name="op3" value="Hong Kong" />
<label>Hong Kong</label>
</div>
</div>
</fieldset>
<!-- Step 4 -->
<fieldset id="step4">
<div class="question">
<!-- Question -->
<h1 class="mainHeading">What is the capital of France?</h1>
<!-- Next Prev BUtton -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="next" id="step4btn">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Options -->
<div
class="animateFields d-flex justify-content-between flex-wrap"
>
<div class="option">
<input type="radio" name="op4" value="London" />
<label>London</label>
</div>
<div class="option">
<input type="radio" name="op4" value="Berlin" />
<label>Berlin</label>
</div>
<div class="option">
<input type="radio" name="op4" value="Paris" />
<label>Paris</label>
</div>
<div class="option">
<input type="radio" name="op4" value="Madrid" />
<label>Madrid</label>
</div>
</div>
</fieldset>
<!-- Step 5 -->
<fieldset id="step5">
<div class="question">
<!-- Question -->
<h1 class="mainHeading">
Which former British colony was given back to China in 1997?
</h1>
<!-- Next Prev Button -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="apply" id="sub">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Options -->
<div
class="animateFields d-flex justify-content-between flex-wrap"
>
<div class="option">
<input type="radio" name="op5" value="Russia" />
<label>Russia</label>
</div>
<div class="option">
<input type="radio" name="op5" value="America" />
<label>America</label>
</div>
<div class="option">
<input type="radio" name="op5" value="Australia" />
<label>Australia</label>
</div>
<div class="option">
<input type="radio" name="op5" value="Hong Kong" />
<label>Hong Kong</label>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</main>
<!-- result -->
<div class="loadingresult">
<img src="assets/images/loading.gif" alt="loading" />
</div>
<div class="result_page">
<div class="result_inner">
<div class="result_inner2">
<h2>Knowledge Check</h2>
<div class="u_result">
<div class="u_score">Your Score:</div>
<div class="u_prcnt">20%</div>
<span>20 Points</span>
</div>
<div class="p_result">
<div class="p_score">Passing Score:</div>
<div class="p_prcnt">80%</div>
<span>80 Points</span>
</div>
<div class="line"></div>
<div class="result_show">
<h2>Result</h2>
<div class="pass_check">
<i class="fa-solid fa-xmark"></i>You did not Pass
</div>
<div class="result_msg">Better Luck Next Time!</div>
</div>
</div>
<!-- rectangle -->
<img
class="behind_bg"
src="assets/images/bh-clip.png"
alt="rectangle"
/>
</div>
</div>
<!-- Bootstrap JS -->
<script src="assets/js/Bootstrap/bootstrap.min.js"></script>
<!-- jQuery -->
<script src="assets/js/jQuery/jquery-3.7.1.min.js"></script>
<!-- Result JS -->
<script src="assets/js/result.js"></script>
<!-- Custom JS -->
<script src="assets/js/custom.js"></script>
</body>
</html>