I have this questionnaire. Now I want to make some if-statements in HTML/CSS/jQuery to obtain the following:
In the beginning only Question 1 is visible, when the input here will be equal to, say, X Question 2 will become visible, when the input for Question 2 will be, say Y, Question 3 will be visible etc. When the answer for Question 3 is correct to, the text will be displayed.
Is it possible to put a if-statement into HTML/CSS/jQuery?
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://ift.tt/1lTlDxP">
<link rel="stylesheet" href="/static/main.css">
<link rel="stylesheet" href="http://ift.tt/1iJFeCG">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ift.tt/J5OMPW"></script>
<script src="/static/app.js"></script>
</head>
<div class="quest" style="display:">
<div class="container">
<div class="row text-center">
<div class="col-xs-8 col-xs-offset-2">
<form class="quest" id="form1">
<p class="vraag1">
<input name="vraag1" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Question 1" id="vraag1" />
</p>
<p class="vraag2">
<input name="vraag2" type="text" class="validate[required,custom[email]] feedback-input" id="vraag2" placeholder="Question 2" />
</p>
<p class="vraag3">
<input name="vraag3" type="text" class="validate[required,custom[email]] feedback-input" id="vraag3" placeholder="Question 3" />
</p>
<b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero leo, pellentesque ornare, adipiscing vitae, rhoncus commodo, nulla. Fusce quis ipsum. Nulla neque massa, feugiat sed, commodo in, adipiscing ut, est. In fermentum mattis ligula. Nulla ipsum. Vestibulum condimentum condimentum augue. Nunc purus risus, volutpat sagittis, lobortis at, dignissim sed, sapien. Fusce porttitor iaculis ante. Curabitur eu arcu. Morbi quam purus, tempor eget, ullamcorper feugiat, commodo ullamcorper, neque.</b>
</div>
</form>
</div>
</div>
</div>
</div>
CSS:
@import url(http://ift.tt/1i6d3Me);
#feedback-page {
text-align: center;
}
.feedback-input {
color: #3c3c3c;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: rgb(245, 245, 245);
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid rgb(42, 186, 214);
color: rgb(51, 51, 51);
outline: none;
padding: 13px 13px 13px 54px;
}
.focused {
color: #30aed6;
border: #30aed6 solid 3px;
}
#vraag1 {
background-image: url(http://ift.tt/1sMiMFL);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
margin-top: 50px;
}
#vraag1:focus {
background-image: url(http://ift.tt/1sMiMFL);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#vraag2 {
background-image: url(http://ift.tt/1sMiMFL);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#vraag2:focus {
background-image: url(http://ift.tt/1sMiMFL);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#vraag3 {
background-image: url(http://ift.tt/1sMiMFL);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
margin-bottom: 50px;
}
#vraag3:focus {
background-image: url(http://ift.tt/1sMiMFL);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
.quest a {
font-size: 18px;
}
Aucun commentaire:
Enregistrer un commentaire