2016-11-06 3 views
1

Ich habe JQuery-Funktionen geschrieben und sie funktionieren wie erwartet, aber die Funktion läuft jedes Mal, wenn ich auf ein Feld des Formulars klicken (um Namen, E-Mail oder irgendetwas einzugeben, siehe Code angehängt) will ich das Skript, das nur ausgeführt wird, wenn auf die Schaltfläche zum Senden geklickt wird. Ich bin immer noch neu in JQuery und ich bin mir nicht sicher, wo ich falsch liege.Run-Funktion nur auf Knopfdruck

Sorry über den langen Code.

* { 
 
    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; 
 
\t 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; 
 
\t text-align: -webkit-left; 
 
} 
 
li { 
 
    text-align: -webkit-match-parent; 
 
    background: #EFDFBC; 
 
    display: block; 
 
    padding: 1px 0px 3px 37px; 
 
\t 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{ 
 
\t 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{ 
 
\t 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; 
 
\t 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; 
 
\t 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 { 
 
\t display: none; 
 
} 
 

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

 
.green{ 
 
\t color:green; 
 
} 
 

 
.yellow{ 
 
\t color:yellow; 
 
} 
 

 
.red{ 
 
\t 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> 
 
\t <meta charset = "UTF-8"/> 
 
\t <title>Questions</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 
<div class = "quiz-questions"> 
 
\t <div id="first-question" class="page active"> 
 
\t \t <div id="questionHeader"> 
 
\t \t \t <h1> Question 1 of 5 </h1> 
 
\t \t </div> 
 
\t \t <div id="questionOneBody"> 
 
\t \t <h3>Questoin 1</h3> 
 
\t \t <ul> 
 
\t \t \t <li>A</li> 
 
\t \t \t <li>B</li> 
 
\t \t </ul> 
 
\t \t \t <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" /> 
 
\t \t \t <label for="quiz-question-one-yes" id="oneYes">Yes</label> 
 
\t \t \t <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" /> 
 
\t \t \t <label for="quiz-question-one-no" id="oneNo">No</label> 
 
\t \t </div> 
 
\t </div> \t 
 

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

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

 

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

 

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

 
\t <div id="client-info" class="page"> 
 
\t \t <div id="clienQuestionHeader"> 
 
\t \t \t <h1> Almost There </h1> 
 
\t \t </div> 
 
\t \t <div id="clientInfoBody"> 
 
\t \t \t <h3 id="clientHeader">Input you contact information to see your eligibility</h3> 
 
\t \t \t <div id="clientForm"> 
 
\t \t \t \t <label id="clientNameLabel" > Name : </label> 
 
\t \t \t \t <div id="clientNameDiv"> 
 
\t \t \t \t \t <input type="text" name="clientname" id="clientName"/> 
 
\t \t \t \t </div> 
 
\t \t \t \t <br> 
 
\t \t \t \t <label id="clientEmailLabel"> Email: </label> 
 
\t \t \t \t <div id="clientEmailDiv"> 
 
\t \t \t \t \t <input type="text" name="clientemail" id="clientEmail" /> 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <br> 
 
\t \t \t \t <label id="clientPhoneLabel"> Phone: </label> 
 
\t \t \t \t <div id="clientPhoneDiv"> 
 
\t \t \t \t \t <input type="text" name="clientphone" id="clientPhone"/> 
 
\t \t \t \t </div> \t \t \t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <br> 
 
\t \t \t \t <hr id="clienFormHr"> 
 
\t \t \t \t <input type="submit" name="clientinformation" id="client-info-submit" onclick="result()"/> 
 
\t \t \t \t <!--<label for="client-info-submit" id="clientInfoLabel">No</label> --> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> \t \t 
 

 
<div class="page result"> 
 
\t <div id="allResult"> 
 
\t \t <div id="resultHeader"> 
 
\t \t \t <h1> Congratulations </h1> 
 
\t \t </div> 
 
\t \t <h1 id="eligibleHeader"> You might be eligible. </h1> 
 
\t \t <hr id="eligibleHr"> 
 
\t \t <div id="result"> 
 
\t \t </div> 
 
\t \t <!-- Vertical Line --> 
 
\t \t <div class="verticalLine"> 
 
\t \t </div> 
 
\t \t <!-- Vertical Line End --> 
 
\t \t <div id="rightSide"> 
 
\t \t \t <h1>Schedule your free consultation now.</h1> 
 
\t \t \t <hr id="consultationHR"> 
 
\t \t \t <div id="calenderTool"> 
 
\t \t \t </div> 
 
\t \t \t <div id="calenderToolSideText"> 
 
\t \t \t \t <p>Use this calender to schedule your appointment, 
 
\t \t \t \t or call our office to have someone do it for you. 
 
\t \t \t \t </p> 
 
\t \t \t \t <p>Because you pre-qualify, the consultation is free.</p> 
 
\t \t \t \t <br> 
 
\t \t \t \t <p>(317) 571-3600</p> 
 
\t \t \t \t <p>M - F, 8:30 am - 5:00 pm </p> 
 
\t \t \t </div> 
 
\t \t \t <hr id="endingHR"> 
 
\t \t \t <h3 id="shareQuiz"> Share the quiz </h3> 
 
\t \t \t <p id="rightsidePara"> Your friends won't see your results,</p> 
 
\t \t \t <p id="rightsideParaTwo">just alink to take it themselves. </p> 
 
\t \t \t <div id="images"> 
 
\t \t \t \t <img id ="facebook" src="logos/FacebookIcon.png"></img> 
 
\t \t \t \t <img id ="twitter" src="logos/TwitterIcon.png"></img> 
 
\t \t \t \t <img id ="googleplus" src="logos/GooglePlusIcon.png"></img> \t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <p id="bkrwebsite">www.bkr.com</p> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
\t 
 
</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() { 
 
\t 
 
\t var r = results, 
 
\t rt = $('#result'); 
 

 

 
\t if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t <!-- YELLOW --> 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('yellow').addClass('yellow'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('yellow').addClass('yelllow'); 
 
\t } 
 

 
\t <!-- RED --> 
 

 
\t <!--else if (!r.quizquestionone) {--> 
 
\t <!--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');--> 
 
\t <!--}--> 
 

 
\t <!--else if ((r.quizquestionone) && (!quizquestionfour)) {--> 
 
\t <!--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');--> 
 
\t <!--}--> 
 
\t else{ 
 
\t \t rt.text('red').addClass('red'); 
 
\t } 
 
} 
 

 
$(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(); 
 
    }); 
 
}); 
 
\t \t 
 
</script>

+0

Bitte reduzieren Sie Ihren Code ein ** minimal ** [MCVE] Das ist ausreichend, um das Problem zu duplizieren, das Sie sehen. – Makyen

Antwort

2

entfernen onclick=result() von Submit-Button. Und behandeln Ereignisse aus Radio und einreichen Tasten wie folgt aus:

$('.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(); 
}); 
+0

tun, dass es nicht die Fragen laufen lässt. Ich kann die Fragen nicht beantworten. – Maddy

+0

Es tut mir leid, vielleicht verstehe ich es nicht richtig, Was meinst du damit, es aus JQuery zu entfernen? – Maddy

+0

@Mani Überprüfen Sie hier: https://jsbin.com/xilelecela/ – sam

1

if Klausel in einer .click Funktion (d.h Ihr Ergebnis() funtion) ist nicht erforderlich.

Ihre Funktion wird wie:

$('.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(); 
}); 

Run unter Code-Schnipsel:

* { 
 
    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; 
 
\t 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; 
 
\t text-align: -webkit-left; 
 
} 
 
li { 
 
    text-align: -webkit-match-parent; 
 
    background: #EFDFBC; 
 
    display: block; 
 
    padding: 1px 0px 3px 37px; 
 
\t 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{ 
 
\t 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{ 
 
\t 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; 
 
\t 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; 
 
\t 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 { 
 
\t display: none; 
 
} 
 

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

 
.green{ 
 
\t color:green; 
 
} 
 

 
.yellow{ 
 
\t color:yellow; 
 
} 
 

 
.red{ 
 
\t 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> 
 
\t <meta charset = "UTF-8"/> 
 
\t <title>Questions</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 
<div class = "quiz-questions"> 
 
\t <div id="first-question" class="page active"> 
 
\t \t <div id="questionHeader"> 
 
\t \t \t <h1> Question 1 of 5 </h1> 
 
\t \t </div> 
 
\t \t <div id="questionOneBody"> 
 
\t \t <h3>Questoin 1</h3> 
 
\t \t <ul> 
 
\t \t \t <li>A</li> 
 
\t \t \t <li>B</li> 
 
\t \t </ul> 
 
\t \t \t <input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" /> 
 
\t \t \t <label for="quiz-question-one-yes" id="oneYes">Yes</label> 
 
\t \t \t <input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" /> 
 
\t \t \t <label for="quiz-question-one-no" id="oneNo">No</label> 
 
\t \t </div> 
 
\t </div> \t 
 

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

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

 

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

 

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

 
\t <div id="client-info" class="page"> 
 
\t \t <div id="clienQuestionHeader"> 
 
\t \t \t <h1> Almost There </h1> 
 
\t \t </div> 
 
\t \t <div id="clientInfoBody"> 
 
\t \t \t <h3 id="clientHeader">Input you contact information to see your eligibility</h3> 
 
\t \t \t <div id="clientForm"> 
 
\t \t \t \t <label id="clientNameLabel" > Name : </label> 
 
\t \t \t \t <div id="clientNameDiv"> 
 
\t \t \t \t \t <input type="text" name="clientname" id="clientName"/> 
 
\t \t \t \t </div> 
 
\t \t \t \t <br> 
 
\t \t \t \t <label id="clientEmailLabel"> Email: </label> 
 
\t \t \t \t <div id="clientEmailDiv"> 
 
\t \t \t \t \t <input type="text" name="clientemail" id="clientEmail" /> 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <br> 
 
\t \t \t \t <label id="clientPhoneLabel"> Phone: </label> 
 
\t \t \t \t <div id="clientPhoneDiv"> 
 
\t \t \t \t \t <input type="text" name="clientphone" id="clientPhone"/> 
 
\t \t \t \t </div> \t \t \t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <br> 
 
\t \t \t \t <hr id="clienFormHr"> 
 
\t \t \t \t <input type="submit" name="clientinformation" id="client-info-submit" /> 
 
\t \t \t \t <!--<label for="client-info-submit" id="clientInfoLabel">No</label> --> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> \t \t 
 

 
<div class="page result"> 
 
\t <div id="allResult"> 
 
\t \t <div id="resultHeader"> 
 
\t \t \t <h1> Congratulations </h1> 
 
\t \t </div> 
 
\t \t <h1 id="eligibleHeader"> You might be eligible. </h1> 
 
\t \t <hr id="eligibleHr"> 
 
\t \t <div id="result"> 
 
\t \t </div> 
 
\t \t <!-- Vertical Line --> 
 
\t \t <div class="verticalLine"> 
 
\t \t </div> 
 
\t \t <!-- Vertical Line End --> 
 
\t \t <div id="rightSide"> 
 
\t \t \t <h1>Schedule your free consultation now.</h1> 
 
\t \t \t <hr id="consultationHR"> 
 
\t \t \t <div id="calenderTool"> 
 
\t \t \t </div> 
 
\t \t \t <div id="calenderToolSideText"> 
 
\t \t \t \t <p>Use this calender to schedule your appointment, 
 
\t \t \t \t or call our office to have someone do it for you. 
 
\t \t \t \t </p> 
 
\t \t \t \t <p>Because you pre-qualify, the consultation is free.</p> 
 
\t \t \t \t <br> 
 
\t \t \t \t <p>(317) 571-3600</p> 
 
\t \t \t \t <p>M - F, 8:30 am - 5:00 pm </p> 
 
\t \t \t </div> 
 
\t \t \t <hr id="endingHR"> 
 
\t \t \t <h3 id="shareQuiz"> Share the quiz </h3> 
 
\t \t \t <p id="rightsidePara"> Your friends won't see your results,</p> 
 
\t \t \t <p id="rightsideParaTwo">just alink to take it themselves. </p> 
 
\t \t \t <div id="images"> 
 
\t \t \t \t <img id ="facebook" src="logos/FacebookIcon.png"></img> 
 
\t \t \t \t <img id ="twitter" src="logos/TwitterIcon.png"></img> 
 
\t \t \t \t <img id ="googleplus" src="logos/GooglePlusIcon.png"></img> \t \t \t \t 
 
\t \t \t </div> 
 
\t \t \t <p id="bkrwebsite">www.bkr.com</p> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
\t 
 
</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() { 
 
\t 
 
\t var r = results, 
 
\t rt = $('#result'); 
 

 

 
\t if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (r.quizquestiontwo) && (r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('green').addClass('green'); 
 
\t } 
 

 
\t <!-- YELLOW --> 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (r.quizquestionfive)) { 
 
\t \t rt.text('yellow').addClass('yellow'); 
 
\t } 
 

 
\t else if ((r.quizquestionone) && (!r.quizquestiontwo) && (!r.quizquestionthree) && (r.quizquestionfour) && (!r.quizquestionfive)) { 
 
\t \t rt.text('yellow').addClass('yelllow'); 
 
\t } 
 

 
\t <!-- RED --> 
 

 
\t <!--else if (!r.quizquestionone) {--> 
 
\t <!--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');--> 
 
\t <!--}--> 
 

 
\t <!--else if ((r.quizquestionone) && (!quizquestionfour)) {--> 
 
\t <!--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');--> 
 
\t <!--}--> 
 
\t else{ 
 
\t \t rt.text('red').addClass('red'); 
 
\t } 
 
} 
 

 
$('.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(); 
 
    }); 
 
\t \t 
 
</script>

+0

Danke für die Eingabe, ich kann sicherlich versuchen, den Fehler zu debuggen, aber ich bezweifle mit meinem derzeitigen Niveau von JS, ich werde dazu in der Lage sein. – Maddy

+0

ohk, nette Frage aber! – Vikrant

+0

Ich würde aber gerne Ihre Lösung kennen. Es hilft mir nur, über verschiedene Wege zu wissen, dasselbe zu tun. Nochmals vielen Dank – Maddy