File size: 8.44Kb
<!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" />
<!-- thankyou -->
<link rel="stylesheet" href="assets/css/thankyou.css" />
</head>
<body>
<main class="overflow-hidden">
<div class="container">
<!-- Step Count -->
<div class="stepTotal">
<h4>
question <span id="stepNumber">1</span>/<span id="totalSteps"
>5</span
>
</h4>
<div class="stepBar">
<div class="fill"></div>
</div>
</div>
<!-- Form Start -->
<section class="steps">
<form
novalidate
onsubmit="return false"
class="show-section"
id="stepForm"
>
<!-- Step 1 -->
<fieldset id="step1">
<!-- Question -->
<h1 class="question">
How Would you Feel if you Could No Longer use Product?
</h1>
<!-- Options -->
<div class="options">
<div class="option animate">
<input type="radio" name="op1" value="Support" />
<label>Support</label>
</div>
<div class="option animate delay-100">
<input
type="radio"
name="op1"
value="Somewhat Disappointed"
/>
<label>Somewhat Disappointed</label>
</div>
<div class="option animate delay-200">
<input type="radio" name="op1" value="Not Disappointed" />
<label>Not Disappointed</label>
</div>
<div class="option animate delay-300">
<input type="radio" name="op1" value="Very Disappointed" />
<label>Very Disappointed</label>
</div>
</div>
<!-- Next Prev -->
<div class="nextPrev">
<button type="button" class="next" id="step1btn">
Next Question
</button>
</div>
</fieldset>
<!-- Step 2 -->
<fieldset id="step2">
<!-- Question -->
<h1 class="question">
Which Former Britishcolony was Given Back?
</h1>
<!-- Options -->
<div class="options">
<div class="option animate">
<input type="radio" name="op2" value="Russia" />
<label>Russia</label>
</div>
<div class="option animate delay-100">
<input type="radio" name="op2" value="America" />
<label>America</label>
</div>
<div class="option animate delay-200">
<input type="radio" name="op2" value="Australia" />
<label>Australia</label>
</div>
<div class="option animate delay-300">
<input type="radio" name="op2" value="Hong Kong" />
<label>Hong Kong</label>
</div>
</div>
<!-- Next Prev -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="next" id="step2btn">
Next Question
</button>
</div>
</fieldset>
<!-- Step 3 -->
<fieldset id="step3">
<!-- Question -->
<h1 class="question">
How Would you Feel if you Could No Longer use Product?
</h1>
<!-- Options -->
<div class="options">
<div class="option animate">
<input type="radio" name="op3" value="Support" />
<label>Support</label>
</div>
<div class="option animate delay-100">
<input
type="radio"
name="op1"
value="Somewhat Disappointed"
/>
<label>Somewhat Disappointed</label>
</div>
<div class="option animate delay-200">
<input type="radio" name="op3" value="Not Disappointed" />
<label>Not Disappointed</label>
</div>
<div class="option animate delay-300">
<input type="radio" name="op3" value="Very Disappointed" />
<label>Very Disappointed</label>
</div>
</div>
<!-- Next Prev -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="next" id="step3btn">
Next Question
</button>
</div>
</fieldset>
<!-- Step 4 -->
<fieldset id="step4">
<!-- Question -->
<h1 class="question">
Which Former Britishcolony was Given Back?
</h1>
<!-- Options -->
<div class="options">
<div class="option animate">
<input type="radio" name="op4" value="Russia" />
<label>Russia</label>
</div>
<div class="option animate delay-100">
<input type="radio" name="op4" value="America" />
<label>America</label>
</div>
<div class="option animate delay-200">
<input type="radio" name="op4" value="Australia" />
<label>Australia</label>
</div>
<div class="option animate delay-300">
<input type="radio" name="op4" value="Hong Kong" />
<label>Hong Kong</label>
</div>
</div>
<!-- Next Prev -->
<div class="nextPrev">
<button type="button" class="prev">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button type="button" class="next" id="sub">Submit</button>
</div>
</fieldset>
</form>
</section>
<!-- Question Mark -->
<img
class="questionMark"
src="assets/images/questionMark.png"
alt="QuestionMark"
/>
</div>
</main>
<!-- result -->
<div class="loadingresult">
<img src="assets/images/loading.gif" alt="loading" />
</div>
<div class="thankyou-page">
<header class="thankyouheader">
<h2>Quiz has been taken</h2>
</header>
<main class="thankyou-page-inner">
<img src="assets/images/thankyou-check.png" alt="" />
<span>Your answer has been submitted</span>
<h1>Thankyou for taking Quiz</h1>
<div class="subscribe">
<input type="text" placeholder="Your Email" />
<button type="button">subscribe now</button>
</div>
</main>
</div>
<!-- Errors -->
<div id="error"></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>
<!-- ThankyouJS -->
<script src="assets/js/thankyou.js"></script>
<!-- Custom JS -->
<script src="assets/js/custom.js"></script>
</body>
</html>