如何创建具有三种不同答案模式的测验应用程序？

发布于 2025-02-12 16:04:47 字数 2343 浏览 2 评论 0原文

我正在尝试创建一个测验应用程序，该应用程序应该包含5个问题，这些问题是从一组问题中随机选择的。但是，应该有三种不同的方法来回答问题：

至少一个应该使用无线电按钮
至少应该使用一个下拉菜单
至少一个人应该使用文本输入，

请使用我该如何创建？我还没有JS文件，我不介意您创建JS文件。

@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 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>

原文

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 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>

分享到QQ

分享到微博