将要求的属性与动态生成的单选按钮一起使用 [英] Using the required attribute with dynamically generating radio-buttons
问题描述
针对类似问题的答案:如何使用必填"带有无线电"的属性输入字段 在这种情况下似乎不起作用. 我正在修改通过单选按钮提供的多项选择测验.该测验具有内置在外部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.
工作方式
测验是一种性格测试，通过回答二十个问题(每组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.
该脚本运行良好，仅存在单选按钮没有"required"按钮的问题.属性.因此，如果没有选择答案就单击鼠标，他的得分仍为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页面如下:
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; // będzie '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.
如您所见，我对Java语言了解甚少，有人可以帮我吗?感谢您的关注.
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;
这篇关于将要求的属性与动态生成的单选按钮一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
