为网页创建单选按钮文本

我想为青少年创建一个修订网站，我想实现一个使用单选按钮的测试，并在底部提交，这将告诉他们他们的答案是否正确。所有答案都将被设置为4个答案中的一个。谁能解释最简单的方法来做到这一点，只是使用硬代码，因为我不愿意使用数据库，因为目前它只是本地。

将其保存在名为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知识，虽然)。注意"你可以从这里添加问题"这部分。这是一个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
}

EDIT 1:修改为使用单选按钮而不是下拉菜单。

EDIT 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!';
}   
?>

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

myphpfile.php

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

给你，一个好主意

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

谁能解释最简单的方法来做到这一点，只是使用硬代码，因为我不愿意使用数据库，因为目前它只是本地的。

您的解决方案是使用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解决方案将是您安全测试的最佳选择，如果您有这些可用的。请考虑修改你的问题，以帮助我们更好地回答。

相关内容

最新更新

热门标签：