javascript - 单选按钮选择时显示 "Correct"-6ren

javascript - 单选按钮选择时显示 "Correct"

转载作者：行者123 更新时间：2023-11-28 04:14:26

我对 JS 和 HTML5 有点陌生。我正在创建一个简单的测验，只是为了好玩。我知道需要使每个问题都能够独立于其他问题而被标记为“正确”。我如何通过 JS，甚至 CSS/HTML5 来做到这一点？我感觉我需要更改 jquery 文件，但我对如何操作有点困惑。该测验运行完美，正是我想要的方式，但当用户选择答案时，我想显示正确或错误。基本上，当在浏览器中拉出测验时，用户将从每个问题中选择一个答案，当选择正确答案时，我想显示“正确”一词。

依次是我的game.js、CSS 和索引

if (jQuery) {
  var checkAnswers = function() {
    var answerString = "";
    var answers = $(":checked");
    answers.each(function(i) {
      answerString = answerString + answers[i].value;
    });
    $(":checked").each(function(i) {
      var answerString = answerString + answers[i].value;
    });
    checkIfCorrect(answerString);
  };

  var checkIfCorrect = function(theString) {
    if (parseInt(theString, 16) === 811124566973) {
      $("body").addClass("correct");
      $("h1").text("You Win!");

    }
  };

  $("#question1").show();
};
if (impress) {
  $("#question2").show();
};
if (atom) {
  $("#question3").show();
};
if (createjs) {
  $("#question4").show();
};
if (me) {
  $("#question5").show();
};
if (require) {
  $("#question6").show();
};
if ($().playground) {
  $("#question7").show();
};
if (jaws) {
  $("#question8").show();
};
if (enchant) {
  $("#question9").show();
};
if (Crafty) {
  $("#question10").show();
};

body {
  margin-left: 50px;
}

#question1,
#question2,
#question3,
#question4,
#question5,
#question6,
#question7,
#question8,
#question9,
#question10 {
  display: none;
}

canvas {
  display: none;
}

.correct {
  background-color: #24399f;
  color: white;
}

#question1 {
  background-color: #EBF5D1;
}

#question2 {
  background-color: #E0F0D4;
}

#question3 {
  background-color: #D6EBD6;
}

#question4 {
  background-color: #CCE6D9;
}

#question5 {
  background-color: #C2E0DB;
}

#question6 {
  background-color: #B8DBDE;
}

#question7 {
  background-color: #ADD6E0;
}

#question8 {
  background-color: #A3D1E3;
}

#question9 {
  background-color: #99CCE6;
}

#question10 {
  background-color: #8FC7E8;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body onclick="checkAnswers();">
  <h1>Quiz</h1>
  <div id="quiz">
    <div id="question1">
      <div class="question">Which is not a main file type that we use to make websites?</div>
      <input type="radio" name="question1" value="a" />
      <label>.html</label>
      <input type="radio" name="question1" value="b" />
      <label>.exe</label>
      <input type="radio" name="question1" value="c" />
      <label>.js</label>
      <input type="radio" name="question1" value="d" />
      <label>.css</label>
    </div>
    <br />
    <div id="question2">
      <div class="question">A JavaScript object is wrapped by what charaters?</div>
      <input type="radio" name="question2" value="a" />
      <label>[]</label>
      <input type="radio" name="question2" value="b" />
      <label>;;</label>
      <input type="radio" name="question2" value="c" />
      <label>{}</label>
      <input type="radio" name="question2" value="d" />
      <label>()</label>
    </div>
    <br />
    <div id="question3">
      <div class="question">Moles are which of the following?</div>
      <input type="radio" name="question3" value="a" />
      <label>Omniverous</label>
      <input type="radio" name="question3" value="b" />
      <label>Adorable</label>
      <input type="radio" name="question3" value="c" />
      <label>Whackable</label>
      <input type="radio" name="question3" value="d" />
      <label>All of the above</label>
    </div>
    <br />
    <div id="question4">
      <div class="question">In Japanese "か" is prounounced...</div>
      <input type="radio" name="question4" value="a" />
      <label>ka</label>
      <input type="radio" name="question4" value="b" />
      <label>ko</label>
      <input type="radio" name="question4" value="c" />
      <label>ke</label>
      <input type="radio" name="question4" value="d" />
      <label>ki</label>
    </div>
    <br />
    <div id="question5">
      <div class="question">The gravitational constant on earth is approximately...</div>
      <input type="radio" name="question5" value="a" />
      <label>10m/s^2</label>
      <input type="radio" name="question5" value="b" />
      <label>.809m/s^2</label>
      <input type="radio" name="question5" value="c" />
      <label>9.81m/s^2</label>
      <input type="radio" name="question5" value="d" />
      <label>84.4m/s^2</label>
    </div>
    <br />
    <div id="question6">
      <div class="question">45 (in base 10) is what in binary (base 2)?</div>
      <input type="radio" name="question6" value="a" />
      <label>101101</label>
      <input type="radio" name="question6" value="b" />
      <label>110011</label>
      <input type="radio" name="question6" value="c" />
      <label>011101</label>
      <input type="radio" name="question6" value="d" />
      <label>101011</label>
    </div>
    <br />
    <div id="question7">
      <div class="question">4
        << 2=. ..</div>
          <input type="radio" name="question7" value="a" />
          <label>16</label>
          <input type="radio" name="question7" value="b" />
          <label>4</label>
          <input type="radio" name="question7" value="c" />
          <label>2</label>
          <input type="radio" name="question7" value="d" />
          <label>8</label>
      </div>
      <br />
      <div id="question8">
        <div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div>
        <input type="radio" name="question8" value="a" />
        <label>Pi*Radius^2</label>
        <input type="radio" name="question8" value="b" />
        <label>Pythagorean Theorem</label>
        <input type="radio" name="question8" value="c" />
        <label>Calculator?</label>
        <input type="radio" name="question8" value="d" />
        <label>Sin(side1 + side2)</label>
      </div>
      <br />
      <div id="question9">
        <div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div>
        <input type="radio" name="question9" value="a" />
        <label>True</label>
        <input type="radio" name="question9" value="b" />
        <label>False</label>
      </div>
      <br />
      <div id="question10">
        <div class="question">Using a server can help you to...</div>
        <input type="radio" name="question10" value="a" />
        <label>hide your code.</label>
        <input type="radio" name="question10" value="b" />
        <label>have a performant game.</label>
        <input type="radio" name="question10" value="c" />
        <label>create shared experiences for players.</label>
        <input type="radio" name="question10" value="d" />
        <label>all of the above.</label>
      </div>

    </div>
    <script src="jquery.js"></script>
    <script src="impress.js"></script>
    <!-- atom needs this to run -->
    <canvas></canvas>
    <script src="atom.js"></script>
    <script src="easel.js"></script>
    <script src="melon.js"></script>
    <script src="yabble.js"></script>
    <script src="jquery.gamequery.js"></script>
    <script src="jaws.js"></script>
    <script src="enchant.js"></script>
    <script src="crafty.js"></script>
    <script src="game.js"></script>
</body>

</html>

最佳答案

有两种可能的方法:

将各个答案存储在 JS 中，并根据这些答案检查所选单选的值。
将问题的答案存储在数据库中，并向服务器发出请求，根据正确答案验证用户输入。

后者是推荐的解决方案，因为它会让用户看不到您的答案，但如果不重要，您可以使用前一种方法。

通过方法 1 可能的解决方案:

For each radio input create data attributes (question & correct).Now for each selection, check 'question' attribute value and fetch its answer.If it matches, display "Correct" message below the question, else display "Incorrect"

关于javascript - 单选按钮选择时显示 "Correct"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45989965/

文章推荐： html - 使用 CSS 将单词推到新行

文章推荐： c++ - 打印链表只打印头节点

文章推荐： c++ - 使用 "::"字符串名称在 C++ 中调用 DLL 导出

文章推荐： css - 添加Max-Width媒体查询后，背景图不会消失

java - SQL 连接悬空 : Where am I not correctly closing up connections correctly?
我正在构建一个基本的 Java 应用程序来将一些文件加载到 mysql 数据库中。我能够毫无问题地加载文件并填充我的表。然而，在与审查我的代码的人交谈后，我显然没有正确关闭我的连接并浪费资源。我在
c++ - 构建依赖于非 const-correct 库的 const-correct (C++) 库
我正在用 C++ 构建一个库(主要是为了好玩)，我已经研究了一段时间(多年，哈哈，这只是一种爱好) 我最近将一些基础(阅读、库依赖)切换到了另一个库。不幸的是，该库根本不关心“const-correc
c++ - DirectX/C++ : Texture Coordinates not "correct" in-engine correctly after Obj export
如果我绘制单个平面，则纹理坐标会正确映射。 (4 Verts, 4 TC, 6 Indices(2 polys)) 即使它被 segmentation ，(9 Verts, 9 TC, 27 Indi
.net - Azure WindowsCryptographicException : The specified network password is not correct when publishing despite correct password
我正在从文件系统上的 pfx 加载 x509 证书 new X509Certificate2(@"Resources\certificate.pfx", "Password123") 在本地，这工作正
jsf-2 - h :form rendered correctly, 但 h :commandLink doesn't get rendered correctly. 我必须在链接上单击两次
我知道这个问题被问了一遍又一遍。我确实喜欢在与此相关的所有问题中提出建议，并且我在 this question that I put 中做了 BalusC 的操作。告诉我，我还没有成功。所以网络应
php - CakePHP : Incrementing correctly based on last value in DB table (check for correct number base)
简而言之，我正在制作一个预订应用程序。预订 ID 需要从 10000 开始，并在每次新预订时增加 1。我已经开始编写生成此预订编号的方法。我正在努力的是: 第一次运行时，不会有预订编号，所以我不能简
correctness - 如何第一时间写出正确的代码？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
PHP 开关语句 : is this correct?
我查看了 php.net 上的 switch 文档，据我所知，它检查了 switch 和 case 中的变量之间的相等性比较。但是，以下代码似乎适用于所有可能的值(int、null、数组、其他): $
junit - "correct"这组JUnit测试的写法是什么？
我正在为以多种方式创建和作用于实体的服务编写 JUnit 测试。我希望我的测试能够尝试多种不同的事件组合。我有这样的东西: test1() { /** create entity **/ /** as
delphi - "correct"在Delphi中定义快捷方式的方法是什么？
关于如何在 Delphi 程序中定义 ShortCut 的示例有很多，但是它们归结为两种不同的方式: 将任意 scCtrl、scShift 和 scAlt 常量添加到键的 Ord() 使用 Menus
javascript - Javascript对象和继承的首次尝试: is it correct
我正在尝试学习如何在 Javascript 中创建类以及如何执行对象继承。我已经遵循了一些教程，但我不确定我的代码是否正确。我是否正确创建了公共(public)函数和属性？如果不是，我应该改变什么？
javascript - "Correct"使用JQuery访问表单元素值的方法
任何写过 javascript/jquery 的人都知道，有很多不同的方法可以做同样的事情。我目前正在尝试通过表单提交和 AJAX 请求向服务器发送一些数据，我想知道执行此操作的“正确”方法是什么。
error-correction - 单字节纠错
一条 200 字节的消息有一个随机字节损坏。修复损坏字节的最有效方法是什么？ A Hamming(255,247)代码有 8 个字节的开销，但实现起来很简单。 Reed-Solomon error
c++ - 如何制作未定义的移位 “correct”
在C++中，将n -bit整数移位n是未定义的行为: std::uint64_t v = 1; v = v = 64 ? 0 : v > 6; uint64_t mask = (!!temp)
java - 使用鼠标事件 : Am I doing this correctly?
我对 MouseEvents 和 MouseListeners 非常陌生，最近我问了一个关于创建篮球投篮图表的问题。到目前为止我所拥有的是这个 import javax.swing.*; im
代码厨师 : Correct approach or not?
http://www.codechef.com/OCT14/problems/PRLADDU 这是当前的运行比赛。我不想要它的答案，只是让我知道我的方法是否正确。我遵循的方法是按交换方式添加人和恐
python - "Correct"在python网站中存储postgres密码的方法
我正在用 Python(在 Linux 系统上的 Apache 服务器上)编写一个需要连接到 Postgres 数据库的 Web 应用程序。因此，它需要数据库服务器的有效密码。在我的 Python 文
javascript - 单选按钮选择时显示 "Correct"
我对 JS 和 HTML5 有点陌生。我正在创建一个简单的测验，只是为了好玩。我知道需要使每个问题都能够独立于其他问题而被标记为“正确”。我如何通过 JS，甚至 CSS/HTML5 来做到这一点？我感
javascript - "correctly"如何创建一个继承自Element的对象？
我正在编写一个涉及大量 XML 操作的 HTML5 应用程序，其中部分操作涉及比较两个不同 XML 元素的版本。我需要的是每个 Element、Attr 和 TextNode(所有这些都继承自 No
java - 'correct' 实例化JPA管理器bean的方法？
我正在使用 IBM RAD 开发一些 JPA 实体，并从中开发相应的 JPA Manager Bean。管理器 bean(由 RAD 生成)具有以下成员: @PersistenceUnit priva

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单选按钮选择时显示 "Correct"