I am trying to create a quiz app which should feature 5 questions, chosen randomly from a bank of questions. But, the there should be three different ways of answering the questions :
How do I create this please ? I don't have a JS file yet, I don't mind you creating a JS file.
@import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,regular,500,600,700,800,900);
:root {
--background: rgb(29, 26, 26);
--text-color: rgb(255, 255, 255);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--background);
font-family: 'Poppins', sans-serif;
}
.quiz-container {
margin: 30px auto;
width: 70%;
text-align: center;
}
.header h3 {
color: var(--text-color);
font-size: 30px;
}
.question-tog {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
margin: 0 auto;
}
button {
padding: 8px 35px;
cursor: pointer;
border-radius: 5px;
font-size: 15px;
display: flex;
align-items: center;
gap: 20px;
}
i {
font-size: 25px;
}<!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">
<title>Interactive Quiz App</title>
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="/quiz/style.css">
</head>
<body>
<div class="quiz-container">
<div class="header"><h3>Interactive Quiz App</h3></div>
<div class="quiz">
</div>
<div class="question-tog">
<button class="prev"> <span>Prev</span> <i class='bx bx-left-arrow-alt'></i></button>
<button class="next"> <span>Next</span> <i class='bx bx-right-arrow-alt'></i></button>
</div>
</div>
</body>
</html>In order to create the following quiz you need to use js arrays. Which will store the set of questions to choose randomly. Another thing is you need to use js modules to send data across pages. And that is how you can do it.
I'd rather suggest you to use php sessions instead they are way more simpler and easier to word with.