简体   繁体   English

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

[英]How do I create a quiz app with three different answer modes?

I am trying to create a quiz app which should feature 5 questions, chosen randomly from a bank of questions.我正在尝试创建一个应该包含 5 个问题的测验应用程序,这些问题是从一组问题中随机选择的。 But, the there should be three different ways of answering the questions:但是,应该有三种不同的方式来回答问题:

  1. At least one should use radio buttons至少一个应该使用单选按钮
  2. At least one should use a drop down至少一个应该使用下拉菜单
  3. 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.我还没有 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/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.为了创建以下测验,您需要使用 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.另一件事是您需要使用 js 模块跨页面发送数据。 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.我宁愿建议你使用 php 会话,而不是它们更简单,更容易用词。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM