我编写了JQuery函数并且它们按预期工作，但是每次单击表单的任何字段时都会运行该函数（输入名称，电子邮件或任何内容，请参阅附加的代码）我希望脚本仅在运行时运行单击提交按钮。我还是JQuery的新手，我不确定我哪里出错了。
很抱歉长代码。
* {
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;
font-family: sans-serif;
}
div#disclaimer {
width: 800px;
height: 467px;
margin: 0 auto;
margin-top: 200px;
background: #EFDFBC;
padding: 30px 10px 10px 0px;
}
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: #bf2e1a;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: #bf2e1a;
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: #bf2e1a;
font-size: 33px;
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;
font-family: sans-serif;
}
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
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 0px 20px 0px; */
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: #bf2e1a;
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##bf2e1aText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: #bf2e1a;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
div#questionHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
margin-top: 163px;
font-size: 28px;
border-width: 10px;
}
/*div#resultHeader {
margin-top: 163px;
font-size: 28px;
border-width: 10px;
}
div#resultHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
margin-bottom: 10px;
font-size: 28px;
border-width: 10px;
}*/
div#resultHeader {
color: #EFDFBC;
border-style: solid;
margin-bottom: 10px;
margin-left: 110px;
width: 1170px;
font-size: 28px;
border-width: 10px;
}
div#quizResult {
font-size: 20px;
/* width: 650px; */
margin: 0 auto;
background: #EFDFBC;
height: 600px;
margin-top: 10px;
}
div#allResult {
margin: 0 auto;
margin-left: -350px;
margin-right: -350px;
/* background: #EFDFBC; */
}
div#leftResult {
background: #EFDFBC;
width: 610px;
}
div#result {
background: #EFDFBC;
height: 634px;
font-size: 24.5px;
width: 450px;
margin-left: 110px;
padding: 88px 45px 0px 70px;
//font-family: sans-serif;
}
hr#eligibleHr {
position: absolute;
margin-top: 57px;
width: 300px;
margin-left: 182px;
}
div#calenderToolSideText {
background: #EFDFBC;
/* width: 300px; */
margin-left: 551px;
margin-bottom: -18px;
margin-top: -334px;
padding: 0px 68px 0px 0px;
}
div#rightSide {
background: #EFDFBC;
margin-left: 480px;
margin-top: -659px;
height: 634px;
width: 800px;
}
div#rightSide h1 {
text-align: center;
margin-top: 25px;
margin-right: 24px;
background: #EFDFBC;
color: #bf2e1a;
padding: 18px 10px 10px 10px;
}
hr#consultationHR {
width: 595px;
margin-right: 77px;
margin-top: -29px;
}
div#calenderTool {
background: blue;
width: 400px;
height: 330px;
margin-top: 25px;
margin-left: 148px;
}
hr#endingHR {
width: 495px;
margin-top: 25px;
color: #bf2e1a;
width: 597px;
margin-right: 76px;
margin-top: 25px;
}
h3#shareQuiz {
margin-right: 300px;
margin-top: -9px;
}
p#rightsidePara {
margin-left: 131px;
margin-top: -12px;
color: #bf2e1a;
padding: 1px 0px 0px 20px;
}
p#rightsideParaTwo {
margin-left: 136px;
color: #bf2e1a;
}
h1#eligibleHeader {
position: absolute;
margin-left: 180px;
margin-top: 20px;
background: #EFDFBC;
color: #bf2e1a;
}
div#images {
margin-left: 550px;
margin-top: -85px;
background: #EFDFBC;
}
p#bkrwebsite {
margin-left: 550px;
color: #bf2e1a;
}
h3#clientHeader {
background: #EFDFBC;
text-align: center;
color: #bf2e1a;
font-size: 23px;
padding-top: 25px;
/* height: 400px; */
}
hr#clienFormHr {
margin-left: 45px;
margin-top: 40px;
}
div#clientForm {
background: #EFDFBC;
margin-top: 33px;
margin-left: 82px;
}
div#clientInfoBody {
background: #EFDFBC;
width: 425px;
height: 480px;
margin: 0 auto;
}
input#client-info-submit {
display: inline-block;
/* margin: 85px; */
/* margin: 0 auto; */
margin-left: 45px;
margin-top: 12px;
padding: 10px 30px;
background-color: #bf2e1a;
/* border-color: #ddd; */
font-size: 33px;
text-align: center;
}
div#clienQuestionHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
margin-top: 163px;
font-size: 28px;
border-width: 10px;
margin-left: 113px;
margin-right: 110px;
}
input#clientName {
margin-left: 10px;
padding: 5px 80px 5px 10px;
margin-left: 0px;
}
input#clientEmail {
margin-left: 0px;
padding: 5px 80px 5px 10px;
margin-top: 5px;
}
input#clientPhone {
margin-left: 0px;
padding: 5px 80px 5px 10px;
margin-top: 5px;
}
div#clientNameDiv {
background: #EFDFBC;
}
div#clientEmailDiv {
background: #EFDFBC;
}
div#clientPhoneDiv {
background: #EFDFBC;
}
label#clientNameLabel {
background: #EFDFBC;
font-size: 24px;
}
label#clientEmailLabel {
background: #EFDFBC;
font-size: 24px;
}
label#clientPhoneLabel {
background: #EFDFBC;
font-size: 24px;
}
.verticalLine {
width: 2px;
height: 570px;
position: absolute;
margin-left: 591px;
margin-top: -615px;
}
.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;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.red{
color:red;
}
.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 of 5 </h1>
</div>
<div id="questionOneBody">
<h3>Questoin 1</h3>
<ul>
<li>A</li>
<li>B</li>
</ul>
<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 of 5 </h1>
</div>
<div id="questionTwoBody">
<h3>Question 2</h3>
<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 of 5 </h1>
</div>
<div id="questionThreeBody">
<h3>Question 3 </h3>
<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 of 5</h1>
</div>
<div id="questionFourBody">
<h3>Question 4</h3>
<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 5 of 5 </h1>
</div>
<div id="questionFiveBody">
<h3>Question 5</h3>
<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 id="client-info" class="page">
<div id="clienQuestionHeader">
<h1> Almost There </h1>
</div>
<div id="clientInfoBody">
<h3 id="clientHeader">Input you contact information to see your eligibility</h3>
<div id="clientForm">
<label id="clientNameLabel" > Name : </label>
<div id="clientNameDiv">
<input type="text" name="clientname" id="clientName"/>
</div>
<br>
<label id="clientEmailLabel"> Email: </label>
<div id="clientEmailDiv">
<input type="text" name="clientemail" id="clientEmail" />
</div>
<br>
<label id="clientPhoneLabel"> Phone: </label>
<div id="clientPhoneDiv">
<input type="text" name="clientphone" id="clientPhone"/>
</div>
<br>
<hr id="clienFormHr">
<input type="submit" name="clientinformation" id="client-info-submit" onclick="result()"/>
<!--<label for="client-info-submit" id="clientInfoLabel">No</label> -->
</div>
</div>
</div>
<div class="page result">
<div id="allResult">
<div id="resultHeader">
<h1> Congratulations </h1>
</div>
<h1 id="eligibleHeader"> You might be eligible. </h1>
<hr id="eligibleHr">
<div id="result">
</div>
<!-- Vertical Line -->
<div class="verticalLine">
</div>
<!-- Vertical Line End -->
<div id="rightSide">
<h1>Schedule your free consultation now.</h1>
<hr id="consultationHR">
<div id="calenderTool">
</div>
<div id="calenderToolSideText">
<p>Use this calender to schedule your appointment,
or call our office to have someone do it for you.
</p>
<p>Because you pre-qualify, the consultation is free.</p>
<br>
<p>(317) 571-3600</p>
<p>M - F, 8:30 am - 5:00 pm </p>
</div>
<hr id="endingHR">
<h3 id="shareQuiz"> Share the quiz </h3>
<p id="rightsidePara"> Your friends won't see your results,</p>
<p id="rightsideParaTwo">just alink to take it themselves. </p>
<div id="images">
<img id ="facebook" src="logos/FacebookIcon.png"></img>
<img id ="twitter" src="logos/TwitterIcon.png"></img>
<img id ="googleplus" src="logos/GooglePlusIcon.png"></img>
</div>
<p id="bkrwebsite">www.bkr.com</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*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');
}
}*/
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
rt.text('green').addClass('green');
}
else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
rt.text('green').addClass('green');
}
else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
rt.text('green').addClass('green');
}
else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
rt.text('green').addClass('green');
}
else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
rt.text('green').addClass('green');
}
else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
rt.text('green').addClass('green');
}
else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
rt.text('green').addClass('green');
}
<!-- YELLOW -->
else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) {
rt.text('yellow').addClass('yellow');
}
else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) {
rt.text('yellow').addClass('yelllow');
}
<!-- RED -->
<!--else if (!r.quizquestionone) {-->
<!--rt.text('Based on your responses, it’s not clear whether you qualify for a U-Visa. Please schedule a consultation with an experienced immigration attorney. She will collect more information about your specific circumstances and determine whether a U Visa is a realistic possibility or if other immigration benefits might serve you better. The cost of the consultation is only $100 and will be applied to the cost of any legal work performed on your behalf. You may call our office at (317) 571-3600 or fill out the following form to begin. ').addClass('red');-->
<!--}-->
<!--else if ((r.quizquestionone) && (!quizquestionfour)) {-->
<!--rt.text('Based on your responses, it’s not clear whether you qualify for a U-Visa. Please schedule a consultation with an experienced immigration attorney. She will collect more information about your specific circumstances and determine whether a U Visa is a realistic possibility or if other immigration benefits might serve you better. The cost of the consultation is only $100 and will be applied to the cost of any legal work performed on your behalf. You may call our office at (317) 571-3600 or fill out the following form to begin. ').addClass('red');-->
<!--}-->
else{
rt.text('red').addClass('red');
}
}
$(function result () {
$('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>
答案 0 :(得分：2)
从提交按钮中删除onclick=result()。并通过无线电处理事件并提交如下按钮：
$('.quiz-questions input[type=radio], input[type=submit]').click(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();
});
答案 1 :(得分：1)
<{1}}函数中的
if子句（，即您的结果（）功能）不是必需的。
您的功能将如下：
.click运行以下代码段：
$('.quiz-questions input[type=radio], input[type=submit]').click(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');
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;
font-family: sans-serif;
}
div#disclaimer {
width: 800px;
height: 467px;
margin: 0 auto;
margin-top: 200px;
background: #EFDFBC;
padding: 30px 10px 10px 0px;
}
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: #bf2e1a;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: #bf2e1a;
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: #bf2e1a;
font-size: 33px;
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;
font-family: sans-serif;
}
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: #bf2e1a;
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: #bf2e1a;
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: #bf2e1a;
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 0px 20px 0px; */
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: #bf2e1a;
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##bf2e1aText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: #bf2e1a;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
div#questionHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
margin-top: 163px;
font-size: 28px;
border-width: 10px;
}
/*div#resultHeader {
margin-top: 163px;
font-size: 28px;
border-width: 10px;
}
div#resultHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
margin-bottom: 10px;
font-size: 28px;
border-width: 10px;
}*/
div#resultHeader {
color: #EFDFBC;
border-style: solid;
margin-bottom: 10px;
margin-left: 110px;
width: 1170px;
font-size: 28px;
border-width: 10px;
}
div#quizResult {
font-size: 20px;
/* width: 650px; */
margin: 0 auto;
background: #EFDFBC;
height: 600px;
margin-top: 10px;
}
div#allResult {
margin: 0 auto;
margin-left: -350px;
margin-right: -350px;
/* background: #EFDFBC; */
}
div#leftResult {
background: #EFDFBC;
width: 610px;
}
div#result {
background: #EFDFBC;
height: 634px;
font-size: 24.5px;
width: 450px;
margin-left: 110px;
padding: 88px 45px 0px 70px;
//font-family: sans-serif;
}
hr#eligibleHr {
position: absolute;
margin-top: 57px;
width: 300px;
margin-left: 182px;
}
div#calenderToolSideText {
background: #EFDFBC;
/* width: 300px; */
margin-left: 551px;
margin-bottom: -18px;
margin-top: -334px;
padding: 0px 68px 0px 0px;
}
div#rightSide {
background: #EFDFBC;
margin-left: 480px;
margin-top: -659px;
height: 634px;
width: 800px;
}
div#rightSide h1 {
text-align: center;
margin-top: 25px;
margin-right: 24px;
background: #EFDFBC;
color: #bf2e1a;
padding: 18px 10px 10px 10px;
}
hr#consultationHR {
width: 595px;
margin-right: 77px;
margin-top: -29px;
}
div#calenderTool {
background: blue;
width: 400px;
height: 330px;
margin-top: 25px;
margin-left: 148px;
}
hr#endingHR {
width: 495px;
margin-top: 25px;
color: #bf2e1a;
width: 597px;
margin-right: 76px;
margin-top: 25px;
}
h3#shareQuiz {
margin-right: 300px;
margin-top: -9px;
}
p#rightsidePara {
margin-left: 131px;
margin-top: -12px;
color: #bf2e1a;
padding: 1px 0px 0px 20px;
}
p#rightsideParaTwo {
margin-left: 136px;
color: #bf2e1a;
}
h1#eligibleHeader {
position: absolute;
margin-left: 180px;
margin-top: 20px;
background: #EFDFBC;
color: #bf2e1a;
}
div#images {
margin-left: 550px;
margin-top: -85px;
background: #EFDFBC;
}
p#bkrwebsite {
margin-left: 550px;
color: #bf2e1a;
}
h3#clientHeader {
background: #EFDFBC;
text-align: center;
color: #bf2e1a;
font-size: 23px;
padding-top: 25px;
/* height: 400px; */
}
hr#clienFormHr {
margin-left: 45px;
margin-top: 40px;
}
div#clientForm {
background: #EFDFBC;
margin-top: 33px;
margin-left: 82px;
}
div#clientInfoBody {
background: #EFDFBC;
width: 425px;
height: 480px;
margin: 0 auto;
}
input#client-info-submit {
display: inline-block;
/* margin: 85px; */
/* margin: 0 auto; */
margin-left: 45px;
margin-top: 12px;
padding: 10px 30px;
background-color: #bf2e1a;
/* border-color: #ddd; */
font-size: 33px;
text-align: center;
}
div#clienQuestionHeader {
height: 140px;
color: #EFDFBC;
border-style: solid;
margin-top: 163px;
font-size: 28px;
border-width: 10px;
margin-left: 113px;
margin-right: 110px;
}
input#clientName {
margin-left: 10px;
padding: 5px 80px 5px 10px;
margin-left: 0px;
}
input#clientEmail {
margin-left: 0px;
padding: 5px 80px 5px 10px;
margin-top: 5px;
}
input#clientPhone {
margin-left: 0px;
padding: 5px 80px 5px 10px;
margin-top: 5px;
}
div#clientNameDiv {
background: #EFDFBC;
}
div#clientEmailDiv {
background: #EFDFBC;
}
div#clientPhoneDiv {
background: #EFDFBC;
}
label#clientNameLabel {
background: #EFDFBC;
font-size: 24px;
}
label#clientEmailLabel {
background: #EFDFBC;
font-size: 24px;
}
label#clientPhoneLabel {
background: #EFDFBC;
font-size: 24px;
}
.verticalLine {
width: 2px;
height: 570px;
position: absolute;
margin-left: 591px;
margin-top: -615px;
}
.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;
}
.green{
color:green;
}
.yellow{
color:yellow;
}
.red{
color:red;
}
.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;
}