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>
