93 lines
3.9 KiB
HTML
93 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
|
|
<title>Ninja Quiz</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="intro py-3 bg-white" text-center>
|
|
<div class="container">
|
|
<h2 class="text-primary display-3 my-4">Ninja Quiz</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result py-4 bg-light text-center">
|
|
<div class="container lead">
|
|
<p>You are <span class="text-primary display-4 p-3">0%</span> ninja</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quiz py-4 bg-primary">
|
|
<div class="container">
|
|
<h2 class="my-5 text-white">On with the questions...</h2>
|
|
<form class="quiz-form text-light">
|
|
<div class="my-5">
|
|
<p class="lead font-weight-normal">1. How do you give a ninja directions</p>
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q1" value="A" checked>
|
|
<label class="form-check-label">Show them a map</label>
|
|
</div>
|
|
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q1" value="B">
|
|
<label class="form-check-label">Don't worry, a ninja will find you</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-5">
|
|
<p class="lead font-weight-normal">2. If a ninja has 3 apples, then gives one to Mario & one to
|
|
Yoshi, how many apples does the ninja have left?</p>
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q2" value="A" checked>
|
|
<label class="form-check-label">1 apple</label>
|
|
</div>
|
|
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q2" value="B">
|
|
<label class="form-check-label">3 apples and two corpses</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-5">
|
|
<p class="lead font-weight-normal">3. How do you know when you've meet a ninja?</p>
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q3" value="A" checked>
|
|
<label class="form-check-label">You'll recognize the outfit</label>
|
|
</div>
|
|
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q3" value="B">
|
|
<label class="form-check-label">The grim reaper will tell you</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-5">
|
|
<p class="lead font-weight-normal">4. What is a ninja's favourite array method?</p>
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q4" value="A" checked>
|
|
<label class="form-check-label">forEach()</label>
|
|
</div>
|
|
|
|
<div class="form-check my-2 text-white-50">
|
|
<input type="radio" name="q4" value="B">
|
|
<label class="form-check-label">Slice()</label>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<input type="submit" class="btn btn-light">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |