Question

我正在尝试为青少年创建一个修订版网站，我想使用单选按钮和底部的提交来实现测试，这将告诉他们他们的答案是否正确。答案将全部设为4个答案之一。任何人都可以解释使用硬代码执行此操作的最简单方法，因为我不愿意使用数据库，因为它只是在本地。

Answer 1

将其保存在名为quiz.html的文件中，或任何您想要的名称（只保留.html扩展名），然后尝试：

<html>
  <head>
    <title>Quiz</title>
    <style type="text/css">
      .valid{color:#1F1}
      .invalid{color:#F11}
      #overall{font-size:2em;font-weight:bold}
    </style>
    <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
  </head>

  <body>
    <div class="form">
      <div class="form-content"></div>
      <div><input type="button" id="btnSubmit" value="Submit"/></div>
      <div id="overall"></div>
    </div>
    <script type="text/javascript">
      // Questions and answers
      // You can add questions from here >>>>>
      var questions = [
        {"question":"Question 1","possibleAnswers":{"1":"Answer 1-1", "2":"Answer 1-2", "3":"Answer 1-3","4":"Answer 1-4"},"validAnswer":"3"},
        {"question":"Question 2","possibleAnswers":{"1":"Answer 2-1", "2":"Answer 2-2", "3":"Answer 2-3","4":"Answer 2-4"},"validAnswer":"1"}
      ];
      // To here <<<<

      // Building quiz
      var form = $(".form-content");
      for (var i=0;i<questions.length;i++) {
        var q = questions[i];
        var qHtml = '<div id="dq'+i+'"><div>'+q.question+'</div><div>';
        var pas = q.possibleAnswers;
        $.each(pas, function(j, val) {
          qHtml = qHtml + '<input type="radio" name="q'+i+'" value="'+j+'">'+val+'<br/>';
        });
        qHtml = qHtml + '<div class="result"></div></div>';
        form.append($(qHtml));
      }


      var overall = $('#overall');
      // Checking answers on button click
      $('#btnSubmit').click(function(e){
        var goodAnswers = 0;
        for (var i=0;i<questions.length;i++) {
          var q = questions[i];
          var qDom = form.find('#dq'+i);
          var v = qDom.find('input[name="q'+i+'"]:checked').val();
          var rDom = qDom.find('.result');
          if (v == q.validAnswer) {
            rDom.removeClass('invalid').addClass('valid').html('Valid answer');
            goodAnswers++;
          } else {
            rDom.removeClass('valid').addClass('invalid').html('Invalid answer');
          }
        }
        overall.html('Final result: ' + goodAnswers + '&#47;' + questions.length);
      });
    </script>
  </body>
</html>

它是一个仅限HTML / JavaScript的网页（对于有JavaScript知识的人来说不安全）。注意所说的部分＆＃34;你可以从这里添加问题＆＃34;。它是一个javascript数组，您可以根据需要添加任意数量的问题。只需保留每个问题元素的模式：

{
  "question":"Here goes the question",
  "possibleAnswers":  // List of possible answers, "value":"text" pairs, as a JSON object
    {
      "1":"Answer 1",
      "2":"Answer 2",
      "3":"Answer 3",
      ...
      "N":"Answer N"
    },
  "validAnswer":"3"  // Value of the valid answer
}

编辑1：已修改为使用单选按钮而非下拉列表。

编辑2：删除了日志记录，并添加了整体结果。

Answer 2

这可以帮助您入手。将所有代码放在名为quiz.php的文件中并尝试。

HTML：

<html>
<form action='quiz.php' method='POST'>
<input type='radio' name='sex' value='male'>Male<br>
<input type='radio' name='sex' value='female'>Female<br>
<input type='submit' value='submit'>
</form>   
</html>

PHP：

<?php      
$q1 = $_POST['sex'];
if($q1=='male')
{
echo 'correct!';
}   
?>

Answer 3

在PHP中提交用户输入并使用它执行某些操作的简单示例：

HTML

<form action='myphpfile.php' method='POST'>

What brand has a model called Q7 ?
<select name="question1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type="submit">submit</input>
</form>

PHP，myphpfile.php

<?php
$answer1 = "audi";

if($_POST['question1'] == $answer1){echo $answer1.' = is the right answer !'}
else{echo 'Wrong answer'}
?>

Answer 4

你走了，给你一个想法

<?php
//Set Answers//
$q1_answer = 'b';
$q2_answer = 'a';
$q3_answer = 'c';

$form = '<form action="" method="post">
Question 1<br />
A<input type="radio" name="q1" value="a"/>
B<input type="radio" name="q1" value="b"/>
C<input type="radio" name="q1" value="c"/><br />
Question 2<br />
A<input type="radio" name="q2" value="a"/>
B<input type="radio" name="q2" value="b"/>
C<input type="radio" name="q2" value="c"/><br />
Question 3<br />
A<input type="radio" name="q3" value="a"/>
B<input type="radio" name="q3" value="b"/>
C<input type="radio" name="q3" value="c"/><br />
<input type="submit" name="submit" value="submit" />
</form>';

if (isset ($_POST['submit'])){
if ($_POST['q1'] === $q1_answer){
    $q1_res = 'correct';
}else{$q1_res = 'incorrect';
    }
if ($_POST['q2'] === $q2_answer){
    $q2_res = 'correct';
}else{$q2_res = 'incorrect';
    }
if ($_POST['q3'] === $q3_answer){
    $q3_res = 'correct';
}else{$q3_res = 'incorrect';
    }
$display = 'Q1 = '.$q1_res.'<br>
            Q2 = '.$q2_res.'<br>
            Q3 = '.$q3_res.'<br>';

}else{
$display = $form;
}

echo $display;
?>

Answer 5

任何人都可以解释使用硬编码执行此操作的最简单方法，因为我不愿意使用数据库，因为它只是本地的。

您的解决方案是使用Javascript并尽力模糊答案文件。既然你的问题没有说明你是否有PHP或其他服务器解决方案，如node.js可用，我们必须假设HTML / Javascript就是您可以随意使用的。

StackOverflow通常建议不要将外部链接作为答案，但我在这里提供这些作为支持链接来检查。

https://github.com/jrue/JavaScript-Quiz

http://uhaweb.hartford.edu/kelley/quiz/quizmaker-gen.html

从根本上说，使用github示例，您可以在javascript中创建一个测验文件，与github示例不同，我将其放在自己的.js文件中并将其链接而不是包含在HTML标头中。我还混淆了.js文件，以掩盖源代码窥探者的潜在答案，有很多工具可以在线完成。

最终，如果您有可用的安全测试，PHP或Node.js解决方案将是您的最佳选择。请考虑修改您的问题，以帮助我们更好地回答。

为网页创建单选按钮文本

5 个答案: