How do I create a quiz app with three different answer modes?-CodePudding

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 :

At least one should use radio buttons
At least one should use a drop down
At least one should use text input

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/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="/quiz/style.css">
</head>
<body>
    <div >
        <div ><h3>Interactive Quiz App</h3></div>

        <div >
            
        </div>

        <div >
            <button > <span>Prev</span> <i class='bx bx-left-arrow-alt'></i></button>
            <button > <span>Next</span> <i class='bx bx-right-arrow-alt'></i></button>
        </div>
    </div>
</body>
</html>

CodePudding user response：

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.