Cardiac Quiz - Recognize Form Fields

by Amy Kirst

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>

             ...

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;
  border-radius:5px;
  background-color:#b91806
}

button:focus {
  outline-style:none;
 ...

JavaScript

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 based on score
    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 based on percentage
    function showResults() {
        if (percentage < 8) {
          $(".resultCategory").text(
            "Congratulations! You are not at risk for a heart attack in the next 10 years.");
          $(".results").append("<p>Your 10-year risk of a heart attack is " +
            percentage +
  ...