Cardiac Quiz - Empty Input Testing
HTML
<div class="mainWrap">
<h1>What's Your Heart Attack Risk?</h1>
<p>The choices that you make today will affect your next ten years. Take our short quiz to find out if you're at risk of a heart attack in the next decade.</p>
<section class="questions">
<h2 class="outline">Question</h2>
<p class="questionNumber">Question 1 of</p>
<div class="question">
<p class="questionText">What is your age?</p>
<form>
<input type="text" name="age">
</form>
</div>
<!--end questionAge -->
<div class="question hide">
<p class="questionText">What is your total cholesterol?</p>
<form>
<select>
<option disabled selected>Select Range</option>
<option value="Less than 160">Less than 160</option>
<option value="160-199">160-199</option>
<option value="200-239">200-239</option>
<option value="240-279">240-279</option>
<option value="Greater than 279">Greater than 279</option>
</select>
</form>
</div>
<!-- end cholesterol -->
<div class="question hide">
<p class="questionText">Are you a smoker?</p>
<form>
<input name="smoker" type="radio" value="Yes">Yes
<br>
<input name="smoker" type="radio" value="No">No
<br>
</form>
</div>
<!-- end questionSmoker -->
<div class="question hide">
<p class="questionText">What is your high-density lipoprotein (HDL) cholesterol level?</p>
<form>
<select>
<option disabled selected>Select Range</option>
<option value="60">60</option>
<option value="50-59">50-59</option>
<option value="40-49">40-49</option>
<option value="Less than 40">Less than 40</option>
</select>
</form>
</div>
<!-- end questionHDL -->
<div class="question hide">
<p class="questionText">Are you on blood pressure medication?</p>
<form>
<input...
CSS
/* ---------------------- CSS Reset -----------------------*/
a img {
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
line-height: 1em;
font-size: 100%;
font-weight: 400;
}
p {
margin: 0 0 1em;
line-height: 1.5;
}
body {
margin: 0;
}
/* ---------------------- Styles -----------------------*/
.outline {
display: none
}
.hide {
display: none;
}
html {
background: #eaeaea url(background.png) repeat-x left top
}
body {
padding: 30px 0;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size: 15px;
border-top: 1px #0068ac;
min-width: 280px;
}
a:active,
a:link,
a:visited {
color: #0067ab
}
a:visited {
color: #888
}
a:focus,
a:hover {
color: #474646
}
header {
background: #0068ac;
max-width: 980px;
margin: 0 auto 30px
}
.mainWrap {
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 0;
padding: 30px;
box-sizing: border-box;
max-width: 980px;
min-height: 100%;
margin: 0 auto;
color: #666;
line-height: 150%
/* background: #fff url("heart.jpg") no-repeat 95% 95%; */
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: NovareseStd-Book, "NovareseStd Book", "Novarese Std Book", Helvetica, Tahoma, sans-serif;
font-weight: 400;
line-height: 120%;
color: #0068ac;
margin: 1.5em 0 .5em;
}
h1 {
font-size: 2.5em;
margin: 0;
padding: 0;
}
h2 {
font-size: 1.67em
}
h3 {
font-size: 1.4em
}
h4,
h5,
h6 {
font-size: 1.2em
}
p {
margin: 1.2em 0
}
.questionNumber {
font-weight: 700;
color: #0068ac;
margin-top: 30px;
}
.questionText {
font-weight: 700;
margin-top: 1.5em;
}
input[type=text] {
height: 40px;
border-radius: 5px;
border: 2px solid #d1d1d1;
width: 275px;
padding: 5px 15px;
}
input[type=text]:focus {
outline-style: none;
box-shadow: none;
border: 2px solid #a7a7a7
}
button {
width: 150px;
height: 45px;
border: none;
line-height: 120%
}
.doctorButton a,
button {
display: block;
margin-top: 2em;
color: #fff;
...
JavaScript
function isValid() {
var $form = $('form:visible'),
$input = $form.find('input'),
$select = $form.find('select');
var type = $input.length ? 'input' : ($select.length ? 'select' : 'error');
if (type == 'error') {
alert('invalid input type found');
return false;
}
if ($form.find('input[type="radio"]').length) {
return $form.find('input[type="radio"]:checked').length;
}
var inputVal = $form.find(type).val();
return inputVal !== null && inputVal.length;
}
function setHeight() {
var desiredHeight = $(window).height() - $("header").outerHeight(true) - 60; // top and bottom padding
$(".mainWrap").css("min-height", desiredHeight);
//console.log($(window).height());
//console.log($("header").outerHeight(true));
//console.log(desiredHeight);
}
function quesProcess() {
var position = 0;
var totalQues = $(".question").length;
var score = 0;
var quesNum = position + 1;
var age;
var BPMed;
var percentage;
// display total number of questions
$(".questionNumber").append(totalQues);
// calculate percentage
function calculatePerc() {
if (score < 9) {
percentage = 0;
}
if (score >= 9 && score <= 12) {
percentage = 1;
}
if (score == 13 || score == 14) {
percentage = 2;
}
if (score == 15) {
percentage = 3;
}
if (score == 16) {
percentage = 4;
}
if (score == 17) {
percentage = 5;
}
if (score == 18) {
percentage = 6;
}
if (score == 19) {
percentage = 8;
}
if (score == 20) {
percentage = 11;
}
if (score == 21) {
percentage = 14;
}
if (score == 22) {
percentage = 17;
}
if (score == 23) {
percentage = 22;
}
if (score == 24) {
percentage = 27;
}
if (score == 25) {
percentage = 30;
}
console.log("Percentage is: " + percentage);
} // end calculatePerc function
// Show Results
function showResults() {
if...