使用 required 属性和动态生成单选按钮

问题描述

对类似问题的回答:如何使用必填"带有radio"的属性输入框在这种情况下似乎不起作用.我正在调整通过单选按钮提供的多项选择测验.测验在外部 js 文件中内置了单选按钮.

The answers given to a similar question:How to use the "required" attribute with a "radio" input field don't seem to work in this case. I am adapting a multiple choice quiz provided via radio buttons.The quiz has radio buttons built into an external js file.

工作原理

测验是一种性格测试，通过回答 20 个问题(4 组，每组 5 题)您可以获得分数(没有正确答案).单击提交答案"会出现第一个集合之后的集合.按钮.

The quiz is a sort of personality test, by answering the twenty questions (4 sets of 5 questions each) you get points (there are no correct answers). The sets following the first appear by clicking the "Submit Answer" button.

这些点分为 3 个波段:0 到 22、23 到 43、44 到 65.每个波段都附有说明和图像.

The points are divided into 3 bands: 0 to 22, 23 to 43, 44 to 65. Each of which is accompanied by an explanation and an image.

脚本运行良好，唯一的问题是单选按钮没有必需"按钮.属性.所以如果点击不选择答案，他仍然得到0分.

The script works fine, only the problem remains that the radio buttons do not have the "required" attribute. So if one clicks without selecting an answer, he still gets a score of 0.

我已经尝试过多次强制单选按钮，如下例所示:https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_required

I have tried several times make the radio button mandatory, as in this example : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_required

HTML 页面如下所示:

The HTML page look like this:

HTML

<p id="test_status"></p>

<div id="box">
<p id="test"></p>
<p id = "after"></p>
<p id = "message"></p>
<p><img id = "picture"></p>
</div>

仅此而已.

脚本

 / setup initial vars

    var pos = 0;
    var score_all = 0;
      var score = 0;
    var test, test_status, question, choice, choices, chA, chB, chC, chD, chE;
    var l_messagge = "";
    var picture = "";
    var tipo = "";

    // this is a multidimensional array with 4 inner array elements with 5 elements inside them
    var questions = [
      {
          question: "question1",
          a: "answer1",
          b: "answer2",
          c: "answer3",
          d: "answer4",
          e: "answer5",
      score_a: 1,
      score_b: 4,
          score_c: 3,
          score_d: 2,
      score_e: 0
                },
// three more questions follow.

];

    // create the get function

     function get(x){
        return document.getElementById(x);
    }

        // this function renders a question for display on the page
    function renderQuestion(){
    test = get("test");

    //test.innerHTML = questions.length;
      if(pos >= questions.length){
    opis();
    document.getElementById("after").style.visibility = "visible";
     //   get("test_status").innerHTML = "Test completed";
        get("test_status").innerHTML = score_all;
        test.innerHTML = "<h2> "+l_messagge+"</h2>";
        document.getElementById("message").innerHTML = tipo;
    document.getElementById("picture").src = picture;
    
       // resets the variable to allow users to restart the test
        pos = 0;
        score_all= 0;
        // stops rest of render Question function running when test is completed
        return false;
      }
      get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
              get("test_status").innerHTML = score_all;
      question = questions[pos].question;
      chA = questions[pos].a;
      chB = questions[pos].b;
      chC = questions[pos].c;
      chD = questions[pos].d;
      chE = questions[pos].e;
      // display the question
      test.innerHTML = "<h3>"+question+"</h3>";
      
    // display the answer options
    // the += appends to the data we started on the line above
test.innerHTML += "<label> <input type='radio'  name='choices' value='A'> "+chA+"</label><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='B' "+chB+"</label><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='C'> "+chC+"</label><br><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='D'> "+chD+"</label><br>";
      test.innerHTML += "<label> <input type='radio' name='choices' value='E'> "+chE+"</label><br><br>";
      test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
    }
         
// Create a function to check the answers
            function checkAnswer(){
      // use getElementsByName because we have an array which it will loop through
      choices = document.getElementsByName("choices");
      for(var i=0; i<choices.length; i++){
        if(choices[i].checked){
          choice = choices[i].value;   // bdzie 'A', 'B' lub 'C'
      if (choice == 'A' ) {score = questions[pos].score_a;}
      else if (choice == 'B' ) {score = questions[pos].score_b;}
      else if (choice == 'C' ) {score = questions[pos].score_c;}
      else if (choice == 'D' ) {score = questions[pos].score_d;}
        else
        {score = questions[pos].score_e;};
        }
      }
      // checks if answer matches the correct choice
      
        score_all = score_all + score;
      
      // changes position of which character user is on
      pos++;
      // then the renderQuestion function runs again to go to next question
      renderQuestion();
    }
  
  function opis(){
     if (score_all >=  0 && score_all < 4) {
         picture = "img/not.jpg";
         l_messagge = "Message1";
         tipo = "Tipo1";
      }
        else if (score_all >=  4 && score_all < 7  ) {
          picture = "img/gorg.jpg";
          l_messagge = "Tipo2,";  
      }
        else if (score_all >=  7 && score_all < 10  ) {
          picture = "img/blip.jpg";
          l_messagge = "Tipo3";  
      }
        else if (score_all >=  10 && score_all < 13  ) {
          picture = "img/plap.jpg";
          l_messagge = "Tipo4";  
      }
      else
      {
         picture = "img/tik.jpg";
         l_messagge = "message5" ;
      }
    return;
  }
        // Add event listener to call renderQuestion on page load event
    window.addEventListener("load", renderQuestion);

但没有结果.

问题收到回复:

var myStuff = `
<label> <input type='radio' id='oRadA' name='choices' value='A' required='required'> ${chA}</label><br>
<label> <input type='radio' id='oRadB' name='choices' value='B'> ${chB}</label><br>
<label> <input type='radio' id='oRadC' name='choices' value='C'> ${chC}</label><br>
<label> <input type='radio' id='oRadD' name='choices' value='D'> ${chD}</label><br>
<label> <input type='radio' id='oRadE' name='choices' value='E'> ${chE}</label><br>
`;
test.innerHTML = myStuff;

但我无法让它工作.当我转录它时，单选按钮和答案消失了，只有问题仍然可见..

but I am unable to make it work.When I transcribed it, the radio buttons and the answers disappeared, only the questions remain visible..

另一种解决方案是直接将单选按钮插入到html页面中，但我也应该转移相关的javascrip部分，我不知道该怎么做.

Another solution could be to insert the radio buttons directly into the html page, but I should also transfer the related javascrip part, which I don't know how to do.

如您所见，我对 Javascript 知之甚少，有人可以帮帮我吗?感谢您的关注.

As you can see I know very little about Javascript, could someone please help me? Thanks for the attention.

推荐答案

问题

在我妻子的帮助下，我用我称之为 横向思考.

I solved the problem of making mandatory to select one of the answers to the test questions, with the help of my wife, using what I would call an example of Lateral Thinking.

也就是说，不是根据选择的强制性性质而是根据其缺乏的影响进行操作.简而言之:如果您不选择答案，您就不会继续，并且您不需要任何必需".

that is to say, by not operating on the mandatory nature of the selection but on the effects of its lack. In few words: If you don't select an answer you don't go ahead and you don't need any "required".

如何

我将初始分数值设置为 10(第一个问题或以后的问题无法达到分数)，它作为一个块运行.

I set the initial score value to 10 (score not reachable on the first question or later) which operates as a block.

 score = 10;

如果用户选择第一个答案，他可以达到的最大值是 4，然后转到下一个问题.对于每个问题，用户都有分数 = 10"，并且必须通过单击答案来降低分数.

if the user selects the first answer the maximum value he can reach is 4 and goes to the next question. For each question the user has "score = 10", and must lower it by clicking on an answer.

if (score <10) {
score_all = score_all + score;
else {// rendering error message
get ("message"). innerHTML = "<i>" + "Please select your answer." + "</i>";
  }
}

所选答案汇总为:

score_all = score_all + score;

这篇关于使用 required 属性和动态生成单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！