so currently I am trying to display different images for each radio button checked. each question has two answers each and the users are to choose between either and in the end, there is a submit button (like any other form). I want to be able to display images for each certain checked radio button. so for example, if each of the question they picked the first answer and press submit, it would display picture 1, if they were to pick the first answer for all besides the last question, it would display a different picture, and so on (so for each combination of results = different picture). thanks
function myFunction() {
var tops = document.getElementsByName('tops');
var str =' ';
for (i = 0; i < 20; i++) {
if (tops[i].checked === true) {
str += tops[i].value + " ";
}
}
alert(str);
}
<!DOCTYPE html>
<html>
<head>
<title> Quiz Yourself! </title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="deer">
<h1 style="font-size: 120px; text-align: center; border: 3px solid black; background-color: white;"> Quiz Yourself! </h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2000px-Solid_white.svg.png" class="pop">
<h3> 1. Shows or Movies? </h3>
<form class="ok">
<input type="radio" name="tops" value="Shows" checked> Shows <br>
<input type="radio" name="tops" value="Movies"> Movies <br>
</form>
<h3> 2. Apple or Windows? </h3>
<form class="ok">
<input type="radio" name="tops" value="Apple" checked> Apple <br>
<input type="radio" name="tops" value="Windows"> Windows <br>
</form>
<h3> 3. Pink or Blue? </h3>
<form class="ok">
<input type="radio" name="tops" value="Pink" checked> Pink <br>
<input type="radio" name="tops" value="Blue"> Blue <br>
</form>
<h3> 4. Basketball or Football? </h3>
<form class="ok">
<input type="radio" name="tops" value="Basketball" checked> Basketball <br>
<input type="radio" name="tops" value="Football"> Football <br>
</form>
<h3> 5. Phone Call or Texting Type of Person? </h3>
<form class="ok">
<input type="radio" name="tops" value="Phone Call" checked> Phone Call <br>
<input type="radio" name="tops" value="Texting"> Texting <br>
</form>
<h3> 6. Cake or Pie? </h3>
<form class="ok">
<input type="radio" name="tops" value="Cake" checked> Cake <br>
<input type="radio" name="tops" value="Pie"> Pie <br>
</form>
<h3> 7. Big Party or Small Gathering? </h3>
<form class="ok">
<input type="radio" name="tops" value="Big Party" checked> Big Party <br>
<input type="radio" name="tops" value="Small Gathering"> Small Gathering <br>
</form>
<h3> 8. Sneakers or Sandals? </h3>
<form class="ok">
<input type="radio" name="tops" value="Sneakers" checked> Sneakers <br>
<input type="radio" name="tops" value="Sandals"> Sandals <br>
</form>
<h3> 9. Gold or Silver? </h3>
<form class="ok">
<input type="radio" name="tops" value="Gold" checked> Gold <br>
<input type="radio" name="tops" value="Silver"> Silver <br>
</form>
<h3> 10. Pen or Pencil? </h3>
<form class="ok">
<input type="radio" name="tops" value="Pen" checked> Pen <br>
<input type="radio" name="tops" value="Pencil"> Pencil <br>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="myFunction();return false;" class="yes"> Submit </button>
</body>
</html>
I assumed that all of the question can only have 2 choices.
I also assumed that you want to display the image in a <img src='...' /> dom element.
In that case, I have modified your code to work as follows:
a- begin with str empty string
b- check the first question, the first option. If it is checked, append a to str. If it is unchecked then append b. There is no need to check the second option. So, lets skip it
c- loop until all question have been iterated (tops.length) not just '20'. You might decided to add more or remove questions. So it is better to rely on tops.length.
d- Append a proper image file extension to the string obtained above. ie: .png/.jpg/etc.
e- set the property src of the result image as described above.
var results = {
"aaaaaaaaaa":"https://i.ytimg.com/vi/EDzLx3hkli0/maxresdefault.jpg",
"aaaaaaaaab":"https://cdn.pixabay.com/photo/2017/07/28/23/34/fantasy-picture-2550222_960_720.jpg",
"bbbbbbbbbb":"http://your.image.link/here.png"
}
// you need to fill the other values.
function myFunction() {
var tops = document.getElementsByName('tops');
var str ='';
// assuming each question only has 2 choices, we can
// safely iterate through all question by evaluating
// the first option of each question and skipping the
// second option, since, if the first option is checked
// then the other option is not, and vice versa
for (i = 0; i < tops.length; i+=2) {
str += (tops[i].checked)? 'a':'b'; // I choose 'a' for checked, and 'b' for unchecked
}
// after the loop, if all questions were answered by the first option, you will get
// 'aaaaaaaaaa' and if all of them selected the second option, you will get 'bbbbbbbbbb'
var link = results[str]; // lookup for the image path
var img = document.getElementById("result");
img.alt = link;
img.src = link;
alert(str + "=" + link);
}
<!DOCTYPE html>
<html>
<head>
<title> Quiz Yourself! </title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="deer">
<h3> 1. Shows or Movies? </h3>
<form class="ok">
<input type="radio" name="tops" value="Shows" checked> Shows <br>
<input type="radio" name="tops" value="Movies"> Movies <br>
</form>
<h3> 2. Apple or Windows? </h3>
<form class="ok">
<input type="radio" name="tops" value="Apple" checked> Apple <br>
<input type="radio" name="tops" value="Windows"> Windows <br>
</form>
<h3> 3. Pink or Blue? </h3>
<form class="ok">
<input type="radio" name="tops" value="Pink" checked> Pink <br>
<input type="radio" name="tops" value="Blue"> Blue <br>
</form>
<h3> 4. Basketball or Football? </h3>
<form class="ok">
<input type="radio" name="tops" value="Basketball" checked> Basketball <br>
<input type="radio" name="tops" value="Football"> Football <br>
</form>
<h3> 5. Phone Call or Texting Type of Person? </h3>
<form class="ok">
<input type="radio" name="tops" value="Phone Call" checked> Phone Call <br>
<input type="radio" name="tops" value="Texting"> Texting <br>
</form>
<h3> 6. Cake or Pie? </h3>
<form class="ok">
<input type="radio" name="tops" value="Cake" checked> Cake <br>
<input type="radio" name="tops" value="Pie"> Pie <br>
</form>
<h3> 7. Big Party or Small Gathering? </h3>
<form class="ok">
<input type="radio" name="tops" value="Big Party" checked> Big Party <br>
<input type="radio" name="tops" value="Small Gathering"> Small Gathering <br>
</form>
<h3> 8. Sneakers or Sandals? </h3>
<form class="ok">
<input type="radio" name="tops" value="Sneakers" checked> Sneakers <br>
<input type="radio" name="tops" value="Sandals"> Sandals <br>
</form>
<h3> 9. Gold or Silver? </h3>
<form class="ok">
<input type="radio" name="tops" value="Gold" checked> Gold <br>
<input type="radio" name="tops" value="Silver"> Silver <br>
</form>
<h3> 10. Pen or Pencil? </h3>
<form class="ok">
<input type="radio" name="tops" value="Pen" checked> Pen <br>
<input type="radio" name="tops" value="Pencil"> Pencil <br>
</form>
<br>
<br>
<img id="result" alt="Result Image here" text="Result Image Here" />
<br>
<br>
<br>
<br>
<button onclick="myFunction();return false;" class="yes"> Submit </button>
</body>
</html>
Related
<form>
<label>Skills</label>
<br>
<br>
<input type="checkbox" id="skill1" name="skill1" value="Javascript">
<label for="skill1"> Extensive knowledge of Javascript</label>
<br>
<br>
<input type="checkbox" id="skill2" name="skill2" value="Python">
<label for="skill2"> Extensive knowledge of Python</label>
<br>
<br>
<input type="checkbox" id="skill3" name="skill3" value="C#">
<label for="skill3"> Extensive knowledge of Networking</label>
<br>
<br>
<input type="checkbox" id="skill4" name="skill4" value="C#">
<label for="skill4"> Extensive knowledge of Data storage fundamentals</label>
<br>
<br>
<input type="checkbox" id="skill5" name="skill5" value="C#">
<label for="skill5"> Extensive knowledge of Security foundations</label>
<br>
<br>
<input type="checkbox" id="skill6" name="skill6" value="C#">
<label for="skill6"> Extensive knowledge of AWS service selection</label>
<br>
<br>
<input type="checkbox" id="skill7" name="skill7" value="C#">
<label for="skill7"> Ability to work in a team</label>
<br>
<br>
<input type="checkbox" id="skill8" name="skill8" value="C#">
<label for="skill8"> 5+ years experience</label>
<br>
<br>
<input type="checkbox" id="skill9" name="skill9" value="C#">
<label for="skill9"> 10+ years experience</label>
<br>
<br>
<input type="checkbox" id="skill10" name="skill10" value="C#">
<label for="skill10"> 20+ years experience</label>
<br>
<br>
<input type="checkbox" id="other" name="other" value="other">
<label for="other"> I have other skills. Please list other skills below.</label>
<br>
<br>
<br>
<label for="subject">Subject:</label>
<textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea>
<input type="submit" value="Apply">
</form>
How do I make it so that, if the "other" checkbox is selected, the textbox must be filled out or the form cannot be submitted. I must use JavaScript to do this. Please explain in detail because I'm rather new to JavaScript.
Yes, you can easily achieve this using JavaScript:
HTML:
<input
type="checkbox"
id="other"
name="other"
value="other"
onclick="otherCheckBox()"
/>
(Just add an onclick event to your 'other' checkbox, so that it fires off a function whenever clicked)
JS:
<script>
function otherCheckBox() {
var checkBox = document.getElementById("other"); //Getting the 'other' CheckBox
var otherBox = document.getElementById("otherbox"); //Getting the TextBox
if (checkBox.checked) {
otherBox.required = "true"; //Setting the 'required' parameter to true if checkbox is checked
} else {
otherBox.required = ""; //Setting the 'required' parameter to false if the checkbox is not checked
}
}
</script>
Add this Script tag in your html head.
When fired, This function will check if the checkbox with id other is checked. If it is checked, it will set the required attribute of the textbox with id otherbox to true, and if not checked, it will set it to false.
I'm learning Javascript and forms in HTML and I knew about radio buttons. But the problem is when I'm coding 3 radio buttons for testing, somehow it doesn't work, and when I check "1" (it's a name) and I choose another one like "2", it doesn't uncheck "1"! Does my browser have a problem, or my code is wrong? I'm using the Microsoft Edge browser, and this is my code:
<form>
<label for="html">This one is Html </label>
<input type="radio" name="html" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="css" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="javscript" id="javascript" value="JAVASCRIPT">
</form>
Anyone know what is my problem?
name property is as a group. so if you set the same name on radio buttons, they are being in same group.
<form>
<label for="html">This one is Html </label>
<input type="radio" name="group1" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="group1" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="group1" id="javascript" value="JAVASCRIPT">
</form>
This is simple, you just need to use the same name for each group, here i used codetype:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label for="html">This one is Html </label>
<input type="radio" name="codetype" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="codetype" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="codetype" id="javascript" value="JAVASCRIPT">
</form>
</body>
</html>
Please you can use radio button that time all radio button name set same then you select at that time one radio button.
<form>
<label for="html">This one is Html </label>
<input type="radio" name="skill" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="skill" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="skill" id="javascript" value="JAVASCRIPT">
</form>
Just use the same name attribute value for each group.
<form>
<label for="html">This one is Html </label>
<input type="radio" name="radio_button" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="radio_button" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="radio_button" id="javascript" value="JAVASCRIPT">
</form>
<h1>User Review</h1>
<p><em style="font-weight:bold">Still not convinced? </em><br><br> Well let's take a look and see what our </p>
<p>users have to say about RedPanda.</p>
<nav><h1 id="r1" id="comment"> Amazing <br id='rating_1'><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></h1></nav>
<nav><h1 id="r1">Brilliant <br><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></h1></nav>
<nav><h1 id="r1">Good <br><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span></h1></nav>
<nav><h1 id="r1">Ugly Logo <br><span>★</span><span>★</span><span>☆</span><span>☆</span><span>☆</span></h1></nav>
<nav><h1 id="r1">Free Software <br><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span></h1></nav><br>
You can write your review here :)
Above is the user review html page
<form action="userreview.html" onsubmit="tosubmit()">
<div style="padding-bottom: 18px;">First Name:<span style="color: red;"> </span><br/>
<input type="text" name="firstname">
<br>
<div style="padding-bottom: 18px;">Last Name:<span style="color: red;"> </span><br/>
<input type="text" name="lastname">
<br>
<div style="padding-bottom: 18px;">Review:<span style="color: red;"> </span><br/>
<textarea id="data_8" ${readonly} name="data_8" style="width : 450px;" rows="10" class="form-control"></textarea>
<nav>
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">★★★★★</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">★★★★</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">★★★</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">★★</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">★</label>
</fieldset>
</nav>
<div style="padding-bottom: 18px;">Would you recommend this product?<span style="color: red;"> *</span><br/>
<span><input type="radio" id="data_9_0" name="data_9" value="Yes"/> Yes</span><br/>
<span><input type="radio" id="data_9_1" name="data_9" value="No"/> No</span><br/>
<span><input type="radio" id="data_9_2" name="data_9" value="I am not sure"/> I am not sure</span><br/>
</br>
<input type="submit" value="Submit">
</div>
</form>
This is the form page where users put in their review and their rating. I want the input to replace one of the reviews that i had put on my html at the user review page. Can someone help me ??? thanks
(for example when i put my opinion on this form page, then when i submit the opinion i put will be appear as one of the review on the user review page)
I totally have no idea how to start this so it will be good if some suggestion is given to me thanks
I think what you are looking for is making a database to hold all the reviews. Then you can use php to make the entries in the database and to show all the reviews in the database.
I am sort of confused by what you want but I am guessing that you have that user review form that you want to put on a page. You have multiple ways to do that. My personal favorite is doing it in PHP but there are other ways as well.
HTML:
<div w3-include-html="userreview.html"></div>
PHP:
include_once 'userreview.html';
jQuery:
<script>
$(function(){
$("#user-review").load("userreview.html");
});
</script>
<div id="user-review"></div>
iFrame:
<iframe src="userreview.html"></iframe>
Any one of these should work. If this helped please click the check mark.
Essentially, I want one question to be displayed with several radio button options. When one button is clicked, a new question pops below the first (specific to the answer chosen) with a new set of radio buttons. When an answer from this set is clicked, another question pops below (specific to the answer chosen here) and so on and so forth. If the user decides to select any of the prior radio buttons I would like everything after that button (unrelated to the answer) to be hidden.
I end up with either all options selected at any time will stay on the page even when a different option is selected (the different option is simply added to the list...) Or, only the most recent question will stay on the page, making it impossible to choose differently on the prior questions...
Here is what I have right now:
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
.desc { display: none; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in4" class="desc">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
</body>
</html>
The best way to do this would be to define your questions and answers in a separate Javascript file and dynamically generate the quiz form.
But say you didn't want to do that -- here's one way you could accomplish that with just your HTML (slightly tweaked) and Javascript:
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
if (test[2] == '1') {
// Check whether this is a top-level question, and if so,
// hide all the subquestions (and uncheck responses)
$('.desc').hide();
$('input').not('[value='+test+']').removeAttr('checked');
} else {
// Find the ID of this question
var parent_q = $($(this).parents('.desc')[0]).attr('id');
var type = parent_q.substring(0,2); // Get the type, such as "in"
var level = parent_q.substring(2); // Get the level, such as 1
$(".desc").each(function(elt_index, elt) {
// Hide each question/answer with either a different type or a higher ID.
var e_id = $(elt).attr('id');
if(e_id.substring(0,2) != type || e_id.substring(2) > level) {
$(elt).hide();
$(elt).children('input').removeAttr('checked');
}
});
}
$("#"+test).show();
});
});
.desc { display: none; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in8">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="in8" class="desc">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
</body>
</html>
This should do it:
https://jsfiddle.net/csbnw5ne/2/
I hope the comments in the jsFiddle are clear.
I didn't have much time left so I had to rush it. It's a fairly simple solution:
You have to remember what boxes you opened and which ones you have to close. You have to find this out somehow, so I numbered the boxes with box-number.
Then, in jQuery I check for the box number containing the options. I proceed to close all boxes beyond the box that was just clicked in, but only if the previously opened box was an "earlier" box than the box that was just clicked in!
Then I simply open the required box without hiding all boxes.
Now all you have to do is make sure you sort them correctly. Make sure any "end" of the quiz is the last box and number them correctly. Keep them grouped together like you are now and it should work. It's not perfect, but it's as simple as I could think it up in a few minutes and it should work if you keep your html sorted.
Let me know if you have any more issues with this!
New HTML for when the jsFiddle goes out:
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc" data-box="1">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc" data-box="2">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc" data-box="3">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in6" class="desc" data-box="4">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in4" class="desc" data-box="5">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in7" class="desc" data-box="6">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc" data-box="7">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc" data-box="8">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
New javascript for when the jsfiddle goes out:
$(document).ready(function(){
var lastBoxOpened = 0;
$("input[name$='group1']").click(function() {
var boxNumber = parseInt($(this).parents('.desc').attr("data-box"));
//check if the data-box was succesfully retrieved. If not, first option chosen, reset all of it
if(isNaN(boxNumber)){
boxNumber = 0;
}
var test = $(this).val();
var target = $("#"+test)
var newBoxOpened = target.attr("data-box");
//check if the last opened box was an earlier one than the newly clicked one
if(lastBoxOpened > boxNumber){
//hide boxes beyond the one we opened now
$('.desc').each(function(){
//if box number is bigger than the currently clicked box, close them.
if($(this).attr("data-box") > boxNumber){
$(this).hide();
//uncheck the previously selected radio buttons in now hidden things
$('input', this).prop("checked", false);
}
});
}
//render target box
target.show();
//update last opened box to the newly opened one
lastBoxOpened = newBoxOpened;
});
});
Sidenote: I put the html for the in6 wrapper above the in4 wrapper, so that this outcome (which will never be revealed until the end of the quiz) will always stay on the bottom. Otherwise it would pop up above in6 instead of as an answer.
update: I have now also added the functionality of actually clearing previously selected radio buttons in boxes that get hidden! Just seemed less sloppy to me (Strange if the user has to click a selected box to see a result)
You have to use dynamic elements within your javascript that should link to only one div in your html. Here's an example that i have with a survey that i did. Not sure if you know, but the dynamic elements are the elements with $(<...>):
HTML:
<div id = "surveyDiv">
<ul class = "options">
<ul><input type="radio" id="v1" name="q" value=1>1</ul>
<ul><input type="radio" id="v2" name="q" value=2>2</ul>
<ul><input type="radio" id="v3" name="q" value=3>3</ul>
<ul><input type="radio" id="v4" name="q" value=4>4</ul>
<ul><input type="radio" id="v5" name="q" value=5>5</ul>
</ul>
<button id="next" type="button">Next</button>
</div>
Javascript:
$('#surveyTime').on('click', function(){
friend.name = $('#nameInput').val().trim();
$('.personalInfo').hide();
$('.survey').show();
});
//survey questions
var questions =
[{question: "You would know at least 2 songs at a Pearl Jam concert"},
{question: "You would dress up and dance all day Electric Zoo"},
{question: "You can tell the difference between Country Songs"},
{question: "You enjoy guitar solos"},
{question: "You have been or would go to Bonnaroo"},
{question: "You love Justin Bieber"},
{question: "You know who Public Enemy is"},
{question: "You appreciate Miles Davis"},
{question: "You like and dance/or would like to learn to dance salsa"},
{question: "You're one of those people that says you like all music"}];
//starting with question as 0 since array starts at 0
var questionNumber = 0;
//creates each question one at a time
function createQuestion(index){
var newDiv = $('<div>', {
id: 'current'
});
var newP = $('<p>');
newP.append(questions[index].question);
newDiv.append(newP);
return newDiv;
};
//appends the next question and removes the previous question
//also removes the display of the questions once done
function displayNext(){
$('#current').remove();
if(questionNumber < questions.length){
var nextQuestion = createQuestion(questionNumber);
$('#question').append(nextQuestion);
} else {
$('.survey').hide();
$('#submitButton').show();
var newDiv2 = $('<div>');
var final = $('<h2>Thank You For Taking This Survey. Please Press Submit Button To Meet Your Match</h2>');
newDiv2.append(final);
$('.thankYou').append(newDiv2);
}
}
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/Quiz.css">
<script>
var xmlh,url;
xmlh = new XMLHttpRequest();
url="AnswerFile.txt";
xmlh.onreadystatechange=function(){
if(xmlh.readyState == 4 && xmlh.status ==200){
var myArr =JSON.parse(xmlh.responseText);
myFunctuion(myArr);
}
};
xmlh.open("GET",url,true);
xmlh.send();
function myFunctuion(arr){
var dom=document.getElementById("demo");
var cha=document.getElementById("radio1");
var chb=document.getElementById("radio2");
var chc=document.getElementById("radio3");
dom.innerHTML = "<h3>" +arr[0].question+ "</h3>";
cha.innerHTML = arr[0].ChA ;
chb.innerHTML = arr[0].ChB ;
chc.innerHTML = arr[0].ChC ;
}
</script>
<head>
<html>
<body>
<div class="w3-content" >
<form class="w3-container w3-card-4 w3-label">
<label id="demo"></label>
<input class="w3-radio" type="radio" name="ChA" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="ChB" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="ChC" value="c"> <label id="radio3"></label></input></br>
<br>
<br>
<input class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey w3-center w3-section w3-border w3-round-xlarge " style="font-weight:900;" type="submit" value="Submit Answers">
</form>
</div>
</body>
</html>
i get my all question and option from text file by JSON and i succeeded it .
But my main problem is all my radio button is checked where i want to if one button is checked then other button is unchecked .
what my problem in code ? what i do? and why cause this problem ?
?** for style i use W3.CSS **?
Your HTML input radio should have the same name attribute, like this:
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Your radio buttons should all use the same name :)
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Name of your radio input fields should be same for specific question's options. Like below:
First group of radios
<input type="radio" name="rad" value="radopt1" id="radopt1"><label for="radopt1">Radio Option1</label></input>
<input type="radio" name="rad" value="radopt2" id="radopt2"><label for="radopt2">Radio Option2</label> </input>
<input type="radio" name="rad" value="radopt3" id="radopt3"><label for="radopt3">Radio Option3</label></input>
Second group of radios
<input type="radio" name="rad1" value="rad1opt1" id="rad1opt1"><label for="rad1opt1">Radio1 Option1</label></input>
<input type="radio" name="rad1" value="rad1opt2" id="rad1opt2"><label for="rad1opt2">Radio1 Option2</label> </input>
<input type="radio" name="rad1" value="rad1opt3" id="rad1opt3"><label for="rad1opt3">Radio1 Option3</label></input>