Mani Mani - 2 months ago 4
CSS Question

Conditionals with radio buttion and JQuery

This question is in continuation to my previously asked question.
I am fairly new to CSS, Javascript / JQuery.

I am sorry if this question has alot of code but without it, it does not work properly.

Previous Question

Problem:
I am trying to set conditionals using radio buttons so that selected combination lead to a certain outcome.
I have tired multiple approaches but none of them have been successful so far. A user's response in the previous question works only for that example (which I tried to work with)

The code below does not as expected.

There are 5 question in total .I am using JQuery hide the divs until each question is answered.
If you click on "Yes" on the first one then anything else, it would give out result as ALL YES.
If you click on "No" on the first one then anything else, it would give out result as ALL No.
In between it gives mixed response as the output.


If anyone can please guide me how I can fix this. I have read multiple things online, did tutorials but I am not able to reach the desired solution.



* {
box-sizing: border-box;
background-color: #bf2e1a;
}
header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
margin-left: 650px;
margin-right: 650px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}

div#main-content {
margin-top: 100px;
}

div#disclaimer {
width: 800px;
height: 100px;
height: 500px;
margin: 0 auto;
margin-top: 200px;
background: #EFDFBC;
}

div#get-justice {
position: relative;
top: 30px;
padding-top: 10px;
background-color: #EFDFBC;
margin: 0 auto;
width: 600px;
height: 600px;
}
div#get-justice p {
background-color: #EFDFBC;
color: red;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: red;
border: none;
color: white;
margin-top: 120px;
padding: 20px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
cursor: pointer;
}
h3 {
background: #EFDFBC;
text-align: center;
color: red;
font-size: 23px;
padding-top: 25px;
}
div#first-question {
text-align: center;
}

ul {
columns: 2;
background: #EFDFBC;
text-align: -webkit-left;
}
li {
text-align: -webkit-match-parent;
background: #EFDFBC;
display: block;
padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-two-yes {
display: none;
margin: 11px;
}
input#quiz-question-two-no {
display: none;
margin: 11px;
}
label#twoYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-three-yes {
display: none;
margin: 11px;
}
input#quiz-question-three-no {
display: none;
margin: 11px;
}

label#threeYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*label#threeYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
input#quiz-question-four-yes {
display: none;
margin: 11px;
}
input#quiz-question-four-no {
display: none;
margin: 11px;
}

label#fourYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}

/*
label#fourYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
input#quiz-question-five-yes {
display: none;
margin: 11px;
}
input#quiz-question-five-no {
display: none;
margin: 11px;
}

label#fiveYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}

/*
label#fiveYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/

.clientinfo{
height:445px;
background-color: #EFDFBC;
}

p {
background-color: #EFDFBC;
font-size: 23px;
margin: 0 auto;
padding: 10px 0px 1px 70px;
}

input[type="text"] {
background-color: white;
padding: 4px 0px 0px 10px;
margin: 0px 0px 0px 70px;
}

button {
display: block;
margin: 0 auto;
padding: 25px 35px 20px 25px;
font-size: 35px;
margin-top: 45px;
color: #EFDFBC;
}

button#start {
display: block;
margin: 0 auto;
width: 200px;
padding: 25px 35px 20px 25px;
font-size: 35px;
margin-top: -272px;
margin-right: 68px;
}

hr {
width: 165px;
padding: 1px 0px 0px 0px;
}

div#disclaimer {
width: 800px;
padding: 27px 10px 10px 0px;
}

div#questionOneBody {
background: #EFDFBC;
}
div#questionTwoBody {
background: #EFDFBC;
}
div#questionThreeBody {
background: #EFDFBC;
}
div#questionFourBody {
background: #EFDFBC;
}
div#questionFiveBody {
background: #EFDFBC;
}
h1 {
/* padding: 20px 4px 20px; */
text-align: center;
margin-top: 25px;
}
/*
h1 {
//background: #EFDFBC;
padding: 20px 4px 20px;
text-align: center;
}
*/

h1#disclaimerHeader{
background: #EFDFBC;
padding: 20px 4px 20px;
text-align: center;
}

p {
background-color: #EFDFBC;
font-size: 23px;
margin: 0 auto;
padding: 1px 0px 0px 20px;
}

div#disc-container {
width: 450px;
background: #EFDFBC;
padding: 10px 10px 14px 10px;
border-style: solid;
border-color: red;
border-width: 10px;
margin-left: 20px;
}

a#disclaimerLink {
text-decoration: none;
}


/*.hideHeader{
display:none;
}*/

p#greenText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: green;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
p#yellowText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: yellow;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
p#redText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: red;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}

div#questionHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
/* border-color: #EFDFBC; */
/* top: 153px; */
/* padding-bottom: 30px; */
/* padding-top: 30px; */
margin-top: 163px;
/* margin: 0 auto; */
/* width: 650px; */
/* text-align: center; */
font-size: 28px;
border-width: 10px;
}

.bkr-header{
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 600px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
.visible2 {
display: block;
margin: 0 auto;
width: 650px;
height: 165px;
background: #EFDFBC;
}

.visible4 {
display: block;
margin: 0 auto;
width: 650px;
height: 195px;
background: #EFDFBC;
}

.visibleHeader {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 650px;
text-align: center;
font-size: 60px;
border-width: 10px;
}

.page {
display: none;
}

.page.active {
display: block;
margin: 0 auto;
width: 650px;
}

.questions {
margin: 0px auto;
width: 650px;
height: 444px;
background: #EFDFBC;
}
.questions-header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 650px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.quiz-questions {
margin-top: 100px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Questions</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
<div class = "quiz-questions">
<div id="first-question" class="page active">
<div id="questionHeader">
<h1> Question 1 </h1>
</div>
<div id="questionOneBody">
<h3>First Question</h3>
<ul>
<li>a</li>
<li>b</li>
</ul>
<hr>
<input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
</div>

<div id="second-question" class="page">
<div id="questionHeader">
<h1> Question 2 </h1>
</div>
<div id="questionTwoBody">
<h3>Second Questions</h3>
<hr>
<input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
</div>

<div id="third-question" class="page">
<div id="questionHeader">
<h1> Question 3 </h1>
</div>
<div id="questionThreeBody">
<h3>Third Question </h3>
<hr>
<input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
</div>


<div id="fourth-question" class="page">
<div id="questionHeader">
<h1> Question 4 </h1>
</div>
<div id="questionFourBody">
<h3>some question</h3>
<hr>
<input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
</div>


<div id="fifth-question" class="page">
<div id="questionHeader">
<h1> Question 4 </h1>
</div>
<div id="questionFiveBody">
<h3>Fourth Question</h3>
<hr>
<input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
</div>

<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</div>
</body>
</html>

<script type="text/javascript">

var results = {};

function updateResult() {
var r = results,
rt = $('#result');
if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
rt.text('All Yes');
} else if (!((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive))) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}

$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});

</script>




Answer
  1. You had a problem with your labels (you had <label for="quiz-question-two-yes" id="twoNo">No</label>, while it should be <label for="quiz-question-two-no" id="twoNo">No</label>)
  2. The else if statement was not correct. If you want to check that all values are false it's not enough to test (! ((val1) && (val2) && (val3)) ), because if val1 == true and val2 == false, you will get !(true && false) and it equals true. You must use ! on each of them, or use || instead (! (val1 || val2 || val3) ).

Here is the fixed snippet:

var results = {};

function updateResult() {
  var r = results,
      rt = $('#result');
  if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
    rt.text('All Yes');
  } else if ((!r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (!r.quizquestionfour) && (!r.quizquestionfive)) {
    rt.text('All No');
  } else {
    rt.text('We have a mixed response');
  }
}

$(function () {
  $('body').on('click', '[name]', function () {
    var $this = $(this),
        page = $this.closest('.page'),
        next_page = $(page.next());
    results[$this.attr('name')] = $(this).val() === 'yes';
    page.removeClass('active');
    next_page.addClass('active');
    if (next_page.hasClass('result')) updateResult();
  });
});
* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}

div#main-content {
    margin-top: 100px;
}

div#disclaimer {
    width: 800px;
    height: 100px;
    height: 500px;
    margin: 0 auto;
    margin-top: 200px;
    background: #EFDFBC;
}

div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: red;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: red;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    text-align: center;
    color: red;
    font-size: 23px;
    padding-top: 25px;
}
div#first-question {
   text-align: center;
}

ul {
    columns: 2;
    background: #EFDFBC;
	text-align: -webkit-left;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}

label#threeYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
/*label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}

label#fourYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}

label#fiveYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/

.clientinfo{
	height:445px;
    background-color: #EFDFBC;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 10px 0px 1px 70px;
}

input[type="text"] {
    background-color: white;
    padding: 4px 0px 0px 10px;
    margin: 0px 0px 0px 70px;
}

button {
    display: block;
    margin: 0 auto;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: 45px;
    color: #EFDFBC;
}

button#start {
    display: block;
    margin: 0 auto;
    width: 200px;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: -272px;
    margin-right: 68px;
}

hr {
    width: 165px;
    padding: 1px 0px 0px 0px;
}

div#disclaimer {
    width: 800px;
    padding: 27px 10px 10px 0px;
}

div#questionOneBody {
    background: #EFDFBC;
}
div#questionTwoBody {
    background: #EFDFBC;
}
div#questionThreeBody {
    background: #EFDFBC;
}
div#questionFourBody {
    background: #EFDFBC;
}
div#questionFiveBody {
    background: #EFDFBC;
}
h1 {
    /* padding: 20px 4px 20px; */
    text-align: center;
    margin-top: 25px;
}
/*
h1 {
    //background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}
*/

h1#disclaimerHeader{
	background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 1px 0px 0px 20px;
}

div#disc-container {
    width: 450px;
    background: #EFDFBC;
    padding: 10px 10px 14px 10px;
    border-style: solid;
    border-color: red;
    border-width: 10px;
    margin-left: 20px;
}

a#disclaimerLink {
    text-decoration: none;
}


/*.hideHeader{
	display:none;
}*/

p#greenText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: green;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#yellowText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: yellow;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#redText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: red;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}

div#questionHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    /* border-color: #EFDFBC; */
    /* top: 153px; */
    /* padding-bottom: 30px; */
    /* padding-top: 30px; */
    margin-top: 163px;
    /* margin: 0 auto; */
    /* width: 650px; */
    /* text-align: center; */
    font-size: 28px;
    border-width: 10px;
}

.bkr-header{
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 600px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 445px;
    background: #EFDFBC;
}
.visible2 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 165px;
    background: #EFDFBC;
}

.visible4 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 195px;
    background: #EFDFBC;
}

.visibleHeader {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}

.page {
	display: none;
}

.page.active {
    display: block;
    margin: 0 auto;
    width: 650px;
}

.questions {
    margin: 0px auto;
    width: 650px;
    height: 444px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.quiz-questions {
    margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8"/>
	<title>Questions</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
<div class = "quiz-questions">
	<div id="first-question" class="page active">
		<div id="questionHeader">
			<h1> Question 1 </h1>
		</div>
		<div id="questionOneBody">
			<h3>First Question</h3>
			<ul>
				<li>a</li>
				<li>b</li>
			</ul>
			<hr>
			<input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" />
			<label for="quiz-question-one-yes" id="oneYes">Yes</label>
			<input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" />
			<label for="quiz-question-one-no" id="oneNo">No</label>
		</div>
	</div>	

	<div id="second-question" class="page">
		<div id="questionHeader">
			<h1> Question 2 </h1>
		</div>
		<div id="questionTwoBody">
			<h3>Second Questions</h3>
			<hr>
			<input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" />
			<label for="quiz-question-two-yes" id="twoYes">Yes</label>
			<input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" />
			<label for="quiz-question-two-no" id="twoNo">No</label>
		</div>
	</div>

	<div id="third-question" class="page">
		<div id="questionHeader">
			<h1> Question 3 </h1>
		</div>
		<div id="questionThreeBody">
			<h3>Third Question </h3>
			<hr>
			<input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" />
			<label for="quiz-question-three-yes" id="threeYes">Yes</label>
			<input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" />
			<label for="quiz-question-three-no" id="threeNo">No</label>
		</div>
	</div>


	<div id="fourth-question" class="page">
		<div id="questionHeader">
			<h1> Question 4 </h1>
		</div>
		<div id="questionFourBody">
			<h3>some question</h3>
			<hr>
			<input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" />
			<label for="quiz-question-four-yes" id="fourYes">Yes</label>
			<input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" />
			<label for="quiz-question-four-no" id="fourNo">No</label>  
		</div>
	</div>


	<div id="fifth-question" class="page">
		<div id="questionHeader">
			<h1> Question 4 </h1>
		</div>
		<div id="questionFiveBody">
			<h3>Fourth Question</h3>
			<hr>
			<input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" />
			<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
			<input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" />
			<label for="quiz-question-five-no" id="fiveNo">No</label>  
		</div>
	</div>	

	<div class="page result">
	   <label>Results</label>
	   <div id="result"></div>
	</div>
</div>
</body>
</html>

Comments