doctype html
head
  title Appendicitis Risk Score
  link(rel='stylesheet', type='text/css', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css')
  meta(name='viewport', content='width=device-width,height=device-height,initial-scale=1.0')
  .container
    .row
      .col-md-12
        .appy-calculator
          .result
            .result-text 
              h1
              hvaluetext#appyRiskValue -
              hdisplaytext#appy_id2 Enter details
              br
              hdisplaytext#appy_id
          .calculator
            h2.text-center.calculator-title Risk of Appendicitis
              p
              hr.calculator-hr

            form#appyScoreForm                    
              .age
                h7 AGE (YEARS)
                br
                input(class="value_range",id="age",type="range",value="25",min="5",max="45", step="1", oninput='kid_o()')            
                .label-age.field-text 0

              #gender_div
                h7 SEX
                br
                input#female(type='radio', value='female', name='gender_input', onclick='tim1(); mig1(); vomitt0(); temp0();')
                label.radio(for='female') Female
                input#male(type='radio', value='male', name='gender_input', onclick='tim0(); mig0(); vomitt1(); temp1();')
                label.radio(for='male') Male
                
              #kids_gender.hide
                h7 SEX
                br
                input#kids_gender_f(type='radio', value='female_kid',
                name='kids_gender_input')
                label.radio(for='kids_gender_f') Female
                input#kids_gender_m(type='radio', value='male_kid',
                name='kids_gender_input')
                label.radio(for='kids_gender_m') Male

              #time_div.hide
                 h7 TIME FROM SYMPTOM ONSET
                 br
                 input#less24(type='radio', value='less24hr', name='timing_input')
                 label.radio(for='less24') Under 24 hours
                 input#more24(type='radio', value='more24hr', name='timing_input')
                 label.radio(for='more24') Over 24 hours


              .rifpain
                 h7 RIGHT ILIAC FOSSA PAIN
                 br
                 input#nopain(type='radio', name='rifpain_input', value='nopain')
                 label.radio(for='nopain') No pain
                 input#pain(type='radio', name='rifpain_input', value='painyes')
                 label.radio(for='pain') Pain

              #pain_migrate.hide
                 h7 MIGRATION OF PAIN TO RIGHT ILIAC FOSSA
                 br
                 input#nomigration(type='radio', value='migrateno', name='migrate_input')
                 label.radio(for='nomigration') No
                 input#migration(type='radio', value='migrateyes', name='migrate_input')
                 label.radio(for='migration') Yes
                 
              #cough_pain.hide
                 h7 PAIN ON COUGHING, PERCUSSION OR HOPPING
                 br
                 input#no_tender_cough(type='radio', name = 'rif_cough_input', value = 'no_tender_cough_present')
                 
                 label.radio(for='no_tender_cough') No tenderness in RIF
                 input#yes_tender_cough(type='radio', name = 'rif_cough_input', value = 'yes_tender_cough_present')
                 label.radio(for='yes_tender_cough') Tenderness present in RIF


              #reb_tenderness
                 h7 EXAMINATION FINDINGS
                 br
                 input#noreb_t(type='radio', value='none', name='reb_input')
                 label.radio(for='noreb_t') No pain
                 input#light_reb(type='radio', value='light', name='reb_input')
                 label.radio(for='light_reb') RIF pain
                 input#medium_reb(type='radio', value='medium', name='reb_input')
                 label.radio(for='medium_reb') RIF guarding
                 input#strong_reb(type='radio', value='strong', name='reb_input')
                 label.radio(for='strong_reb') Generalised guarding

              #nausea_vomiting.hide
                 h7 NAUSEA/VOMITING
                 br
                 input#no_nausea_vomiting(type='radio', name = 'nausea_input', value = 'no_n_v')
                 label.radio(for='no_nausea_vomiting') No nausea
                 input#nausea_no_vom(type='radio', name = 'nausea_input', value = 'n_no_v')
                 label.radio(for='nausea_no_vom') Nausea only
                 input#vom_and_n(type='radio', name = 'nauseacoe_input', value = 'vomiting_yes')
                 label.radio(for='vom_and_n') Vomiting

              #anorexia.hide
                 h7 LOSS OF APPETITE
                 br
                 input#no_anorexia(type='radio', name = 'anorexia_input', value = 'no_anorexia')
                 
                 label.radio(for='no_anorexia') No loss of appetite
                 input#yes_anorexia(type='radio', name = 'anorexia_input', value = 'anorexia')
                 label.radio(for='yes_anorexia') Loss of appetite
                 
              #temp_slider.hide
                h7 HIGHEST TEMPERATURE
                br
                input(class="value_range",id="temp",type="range",value="37.5",min="35",max="42", step="0.1")
                .label-temp.field-text 0          

              .wcc_slider
                h7 WHITE CELL COUNT
                br
                input(class="value_range",id="wcc",type="range",value="12",min="0",max="45", step="0.1")
                .label-wcc.field-text 0

              .neu_slider
                h7 NEUTROPHIL COUNT
                br
                input(class="value_range",id="neu",type="range",value="6.5",min="0",max="30", step="0.1")
                .label-wcc.field-text 0


              #crp_slider            
                h7 C-REACTIVE PROTEIN
                br
                input(class="value_range",id="crp",type="range",value="1",min="1",max="450", step="1")
                .label-crp.field-text 0

          .submit
           input(type="submit",id="submit", value="Calculate", class="submit", onclick='topFunction();')
           
  script(src='https://code.jquery.com/jquery-2.1.3.min.js', integrity='sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM=', crossorigin='anonymous')
  script(src='http://researchcloud.org.uk/appy_risk_final_v2.js')

  .footer
    divimgr
      img.rift(src='http://researchcloud.org.uk/riftlogo.png')
    div
     footerh1 The RIFT Audit
      br
      footerbody Disclaimer: This calculator is not a replacement for, nor constitutes a clinical judgement or any clinical recommendation. This is not a diagnostic application. We assume no liability or responsibility for clinical decisions, injury, death or any other event to the user or any other arising from the use of this website. Data is not validated for patients outside the ages of 5 to 45 years old or outside a UK population.
    divimgl
      footerh1 [citation goes here with link]
View Compiled
body{
  background: #e7e4e4; 
  background: -webkit-linear-gradient(left top, #e7e4e4, #ffffff); 
  background: -o-linear-gradient(bottom right, #e7e4e4, #ffffff);
  background: -moz-linear-gradient(bottom right, #e7e4e4, #ffffff);
  background: linear-gradient(to bottom right, #e7e4e4, #ffffff);
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 100%;
}

@viewport {
  width: device-width ;
  zoom: 2.0 ;
} 

.appy-calculator{
  margin: 40px auto;
  margin-bottom: 21%;
  width: 62%;
  max-width: 100%;
  display: table;
  background: #f5f5f5;
  color: #4E5279;
  border-radius: 5px;
  box-shadow: 0px 2px 25px 8px #868182;
}

.result{
  display: table;
  width: 100%;
}

.result-text {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px;
  border: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #4CA456; 
  background: -webkit-linear-gradient(left top, #4FD24D, #4CA456); 
  background: -o-linear-gradient(bottom right, #4FD24D, #4CA456);
  background: -moz-linear-gradient(bottom right, #4FD24D, #4CA456);
  background: linear-gradient(to bottom right, #4FD24D, #4CA456);
  transition: all 0.4s ease-in;
  -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
  box-shadow: 0px 0px 0px 0px #333;
 h1{
      color: #fff;
      font-size: 3em;
      margin: 8px 0;
      padding: 0;
  }
 small{
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
 }
}

.calculator{
  padding: 20px;  
}
.calculator-title{
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5em;
  padding: 15px;
}

h3{
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.5em;
  padding: 5px;
}

.calculator-hr{
  margin-top: -10px;
  width: 70%;
  border: 1.2px solid #3a3d53;
  border-radius: 15px;
}
input[type=range] {
  -webkit-appearance: none;
  width: 77%; 
  height: 4px;
  background: #27283A;
  border-radius: 5px;
  display: inline-block;
  margin-top: -15px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; 
}

input[type=range]::-ms-track {
  width: 95%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 25px;
  width: 35px;
  border-radius: 30%;
  background: #44727d;
  cursor: pointer; 
}

input[type=range]::-moz-range-thumb {
  height: 25px;
  width: 35px;
  border-radius: 30%;
  background: #44727d;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  height: 25px;
  width: 35px;
  border-radius: 30%;
  background: #44727d;
  cursor: pointer;
}

.field-text{
  font-size: 2em;
  color: #44727d;
  font-weight: 700;
  padding: 5px;
  display: inline-block;
}
.label-age:after{
  content: ' years';
  font-size: 0.5em;
  color: #44727d;
  font-weight: 400;
  text-align: center;
  margin-top: -12px;
}
.label-temp:after{
  content: ' °C';
  font-size: 0.5em;
  color: #44727d;
  font-weight: 400;
  text-align: center;
  margin-top: -12px;
}
.label-wcc:after{
  content: ' x 10^9/L';
  font-size: 0.5em;
  color: #44727d;
  font-weight: 400;
}

.label-crp:after{
  content: ' mg/L';
  font-size: 0.5em;
  color: #44727d;
  font-weight: 400;
}
.submit{
  text-align: center;
}
#submit{
  background: #44727d; 
  background: -webkit-linear-gradient(left top, #44727d, #44727d); 
  background: -o-linear-gradient(bottom right, #44727d, #44727d);
  background: -moz-linear-gradient(bottom right, #44727d, #44727d);
  background: linear-gradient(to bottom right, #44727d, #30525a);
  border: none;
  border-radius: 30px;
  margin-top: 15px;
  margin-bottom: 40px;
  padding: 4px 25px;
  color: #fff;
  font-size: 1.5em;
  font-weight: 100;
  transition: all 0.3s ease-in;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  &:hover, &:focus{
    color: #99eaef;
    outline: none;
  }
}
input[type=radio] {
  visibility: hidden;
  padding: 15px;
}

input[type=radio_tender] {
  visibility: hidden;
  padding: 15px;
}


label.radio {
  cursor: pointer;
  text-indent: 40px;
  overflow: visible;
  display: inline-block;
  position: relative;
  margin-top: 15px;
  margin-bottom: 20px;
  margin-left: -15px;
  margin-right: 20px;

}

label.radio_tender {
  cursor: pointer;
  text-indent: 40px;
  overflow: visible;
  display: inline-block;
  position: relative;
  margin-top: 15px;
  margin-bottom: 20px;
  margin-left: -15px;
  margin-right: 20px;

}


label.radio:before {
  background: #44727d;
  content:'';
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

label.radio:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 0.5em;
  height: 0.25em;
  background: transparent;
  top: 9px;
  left: 6px;
  border: 3px solid #ffffff;
  border-top: none;
  border-right: none;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type=radio]:checked + label:after {
  opacity: 1;
}

//tender buttons

label_stack.radio:before {
  background: #44727d;
  content:'';
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

label_stack.radio:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 0.5em;
  height: 0.25em;
  background: transparent;
  top: 9px;
  left: 6px;
  border: 3px solid #ffffff;
  border-top: none;
  border-right: none;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.h4{
  display: inline;
}

.footer {
  display: table;
  position: fixed;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1%;
  background-color: #efefef;
  text-align: left;
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0px #868182;
}

.footer div {
    display: table-cell;
    width: 33.333%;
    padding: 1em;
    text-align: left;
}

.footer divimgr {
    display: table-cell;
    width: 10%;
    vertical-align:middle;
    padding: 0em;
    text-align: center;
    border-right: 0.062em solid #929292;
}

.footer divimgl {
    display: table-cell;
    width: 16.333%;
    padding: 1em;
    text-align: left;
    border-left: 0.062em solid #929292;
}

.footer div h2 {
    text-align: center;
 }

.footer div:nth-of-type(2) {
    border-left: 0.062em solid #929292;
 }

img{
    display: inline-block;
    width: 27% auto;
    max-width: 27%;
    height: auto;
}

footerbody{
          color: #929292;
          margins: 0px;
          padding-top: 5px;
          font-size: 70%;
          text-align: justify;
          text-justify: inter-word;
}

footerh1{
          color: #929292;
          margins: 0px;
          padding: 0px;
      font-size: 100%;
}

hdisplaytext{
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
}

hvaluetext{
      color: #fff;
      font-size: 1.5em;
      padding: 0px;
}

@media screen and (max-width:1081px) {
  /* CSS for screens that are 1000 pixels or less will be put in this section */
   .appy-calculator{
  margin: 5px auto;
  margin-bottom: 15%;
  width: 100%;
  max-width: 100%;
  display: table;
  background: #f5f5f5;
  color: #4E5279;
  border-radius: 5px;
  box-shadow: 0px 2px 25px 8px #868182;
  }
 .footer {
  display: table;
  position: relative;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1%;
  background-color: #efefef;
  text-align: left;
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0px #868182;
} 
 input[type=range] {
 -webkit-appearance: none;
 width: 50%; 
 height: 4px;
 background: #27283A;
 border-radius: 5px;
 display: inline-block;
 margin-top: -15px;
}
.label_stack.radio{
  cursor: pointer;
  text-indent: 40px;
  overflow: visible;
  display: block;
  position: relative;
  margin-top: 15px;
  margin-bottom: 20px;
  margin-left: 15px;
  margin-right: 20px;
 }
 img{
    display: inline-block;
    width: 100% auto;
    max-width: 100%;
    height: auto;
 }

}


.hide {
  display: none;
}
var rangeSlider = function(){
  var slider = $('.row'),
      range = $('.value_range'),
      value = $('.field-text');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};
rangeSlider();


$('input[type="range"]').change(function () {
 var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #F73946), '
                + 'color-stop(' + val + ', #27283A)'
                + ')'
                );
});

$('.value_range').each(function (){
   var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #F73946), '
                + 'color-stop(' + val + ', #27283A)'
                + ')'
                );
});

function getRadioVal(form, name) {
    var val;
    // get list of radio buttons with specified name
    var radios = form.elements[name];
    
    // loop through list of radio buttons
    for (var i=0, len=radios.length; i<len; i++) {
        if ( radios[i].checked ) { // radio checked?
            val = radios[i].value; // if so, hold its value in val
            break; // and break out of for loop
        }
    }
    return val; // return value of checked radio or undefined if none checked
}

$('#submit').click(function(){
    var age_in = $('#age').val();
    var sex_val = getRadioVal(document.getElementById('appyScoreForm'), 'gender_input' );
      var nausea_val = getRadioVal(document.getElementById('appyScoreForm'), 'nausea_input' );
      var pain_val = getRadioVal(document.getElementById('appyScoreForm'), 'rifpain_input' );
      var rebound_val = getRadioVal(document.getElementById('appyScoreForm'), 'reb_input' );
      var anorexia_val = getRadioVal(document.getElementById('appyScoreForm'), 'anorexia_input' );
      var cough_pain_val = getRadioVal(document.getElementById('appyScoreForm'), 'rif_cough_input' );
      var mig_val = getRadioVal(document.getElementById('appyScoreForm'), 'migrate_input' );
      var kids_gender_val = getRadioVal(document.getElementById('appyScoreForm'), 'kids_gender_input' );
      var time_val = getRadioVal(document.getElementById('appyScoreForm'), 'timing_input' );    
    var wcc_in = $('#wcc').val()
    var crp_in = $('#crp').val()
    var neu_in = $('#neu').val()
      var temp_in = $('#temp').val()
      var lucytss = neu_in/wcc_in
      if ((sex_val == "male") && (age_in >= 16)){
      if (pain_val == "painyes") {pain = 1;}
        else if (pain_val == "nopain") {pain = 0;}
      if (nausea_val == "vomiting_yes") {vom_out = 1;}
        else if (nausea_val == "no_n_v" || nausea_val == "n_no_v") {vom_out = 0;}
      if (rebound_val == "none") {rebound_tenderness = 0;}
        else if (rebound_val == "light") {rebound_tenderness = 1;}
        else if (rebound_val == "medium") {rebound_tenderness = 2;}
        else if (rebound_val == "strong") {rebound_tenderness = 3;}
      if (wcc_in < 10) {wcc_out = 0;}
        else if ((wcc_in >= 10) && (wcc_in < 15)) {wcc_out = 1;}
        else if (wcc_in >= 15) {wcc_out = 2;}
      if (crp_in < 10) {crp_out = 0;}
        else if ((crp_in >= 10) && (crp_in < 50)) {crp_out = 1;}
        else if (crp_in >= 50) {crp_out = 2;}
      if (temp_in < 38.5) {temp_out = 0;}
        else if(temp_in >= 38.5) {temp_out = 1;}
      if (lucytss < 0.7) {lucytss_out = 0;}
        else if (lucytss > 1) {lucytss_out = 0;}
        else if((lucytss >= 0.7) && (lucytss < 0.84)) {lucytss_out = 1;}
        else if((lucytss >= 0.84) && (lucytss < 1)) {lucytss_out = 2;}
        
totalScoreOut = pain + vom_out + rebound_tenderness + wcc_out + crp_out + temp_out + lucytss_out;
    //for women
    } else if ((sex_val == "female") && (age_in >= 16)) {
      if (pain_val == "painyes") {pain = 2;}
        else if (pain_val == "nopain") {pain = 0;}
    if (mig_val == "migrateno") {mig_out = 0;}
        else if (mig_val == "migrateyes") {mig_out = 2;}
      if (rebound_val == "none") {rebound_tenderness = 0;}
        else if (rebound_val == "light") {rebound_tenderness = 1;}
        else if (rebound_val == "medium") {rebound_tenderness = 2;}
        else if (rebound_val == "strong") {rebound_tenderness = 4;}      
    if (wcc_in < 7.2) {wcc_out = 0;}
        else if ((wcc_in >= 7.2) && (wcc_in < 10.9)) {wcc_out = 1;}
    else if ((wcc_in >= 10.9) && (wcc_in < 14)) {wcc_out = 2;}
        else if (wcc_in >= 14) {wcc_out = 3;}
      if ((crp_in < 4) && (time_val == 'less24hr')) {crp_out = 0;}
        else if ((crp_in >= 4) && (crp_in < 11) && (time_val == 'less24hr')) {crp_out = 2;}
        else if ((crp_in >= 11) && (crp_in < 25) && (time_val == 'less24hr')) {crp_out = 3;}
        else if ((crp_in >= 25) && (crp_in < 83) && (time_val == 'less24hr')) {crp_out = 5;}
        else if ((crp_in > 83) && (time_val == 'less24hr')) {crp_out = 1;}
        else if ((crp_in < 12) && (time_val == 'more24hr')) {crp_out = 0;}
        else if ((crp_in >= 12) && (crp_in < 53) && (time_val == 'more24hr')) {crp_out = 2;}
        else if ((crp_in >= 53) && (crp_in < 152) && (time_val == 'more24hr')) {crp_out = 3;}
        else if ((crp_in > 152) && (time_val == 'more24hr')) {crp_out = 1;}
      if (lucytss < 0.62) {lucytss_out = 0;}
      else if (lucytss > 1) {lucytss_out = 0;}
        else if((lucytss >= 0.62) && (lucytss < 0.75)) {lucytss_out = 2;}
    else if((lucytss >= 0.75) && (lucytss < 0.83)) {lucytss_out = 3;}
        else if((lucytss >= 0.83) && (lucytss < 1)) {lucytss_out = 4;}
      totalScoreOut = pain + mig_out + rebound_tenderness + wcc_out + crp_out + lucytss_out;
   // }
  } else if (age_in <= 15){
    if (mig_val == "migrateyes") {mig_kids = 1;}
        else if (mig_val == "migrateno") {mig_kids = 0;}
    if (pain_val == "painyes") {rif_pain_kids = 2;}
        else if (pain_val == "nopain") {rif_pain_kids = 0;}
    if (temp_in >= 37.5) {pyrexia_kids = 1;}
        else if ( temp_in < 37.5) {pyrexia_kids = 0;}
    if (cough_pain_val == "yes_tender_cough_present") {rif_tender_cough_kids = 2;}
        else if (cough_pain_val == "no_tender_cough_present") {rif_tender_cough_kids = 0;}
    if (anorexia_val == "anorexia") {anorexia_kids = 1;}
        else if (anorexia_val == "no_anorexia") {anorexia_kids = 0;}
    if (nausea_val == "vomiting_yes" || nausea_val == "n_no_v") {vom_out_kids = 1;}
        else if (nausea_val == "no_n_v") {vom_out_kids = 0;}
    if (neu_in < 7.99) {neu_kids = 0;}
      else if (neu_in >=7.99) {neu_kids = 1;}
    if (wcc_in < 12.99) {wcc_bin_kids = 0;}
      else if (neu_in >=12.99) {wcc_bin_kids = 1;}

//leuko and neuts
    totalScoreOut = mig_kids + rif_pain_kids + rif_tender_cough_kids + anorexia_kids + neu_kids +  wcc_bin_kids + pyrexia_kids + vom_out_kids;
  }
    

  $('#appyRiskValue').html(totalScoreOut + " ");
 if ((totalScoreOut <= 8) && (sex_val == 'female') && (age_in >= 16)) {
    //low risk female
    $('.result-text').css('background','-webkit-linear-gradient(left top, #1be749 , #297323 )');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','linear-gradient(to bottom right, #1be749, #297323)');
    $('#appy_id').html("Low risk (<3.7%) of appendicitis");
    $('#appy_id2').html("Adult Appendicitis Score");
  } else if ((totalScoreOut > 8) && (sex_val == 'female') && (age_in >= 16)) {
    //other risk female
  $('.result-text').css('background','-webkit-linear-gradient(left top, #EF7532, #c4005c)');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #EF7532, #c4005c)');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #EF7532, #c4005c)');
    $('.result-text').css('background','linear-gradient(to bottom right, #EF7532, #c4005c)');
    $('#appy_id').html("Moderate or High risk of appendicitis");
    $('#appy_id2').html("Adult Appendicitis Score");
  } else if ((totalScoreOut <= 2) && (sex_val == 'male') && (age_in >= 16)) {
    //low risk male   
    $('.result-text').css('background','-webkit-linear-gradient(left top, #1be749 , #297323 )');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','linear-gradient(to bottom right, #1be749, #297323)');
    $('#appy_id').html("Low risk (<2.4%) of appendicitis");
    $('#appy_id2').html("AIR Score");
  } else if ((totalScoreOut > 2) && (sex_val == 'male') && (age_in >= 16)){
    //other risk male
  $('.result-text').css('background','-webkit-linear-gradient(left top, #e82121, #4709bb)');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #e82121, #4709bb)');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #e82121, #4709bb)');
    $('.result-text').css('background','linear-gradient(to bottom right, #e82121, #4709bb)');
    $('#appy_id').html("Moderate or High risk of appendicitis");
    $('#appy_id2').html("AIR Score");
  } else if ((totalScoreOut <= 3 && age_in <= 15 && kids_gender_val == 'female_kid')) {
    //low risk female kids   
    $('.result-text').css('background','-webkit-linear-gradient(left top, #1be749 , #297323 )');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','linear-gradient(to bottom right, #1be749, #297323)');
    $('#appy_id').html("Low risk (<4.8%) of appendicitis");
    $('#appy_id2').html("Shera's Score");
  } else if ((totalScoreOut <= 3 && age_in <= 10 && kids_gender_val == 'male_kid')) {
    //low risk male kids below 11   
    $('.result-text').css('background','-webkit-linear-gradient(left top, #1be749 , #297323 )');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','linear-gradient(to bottom right, #1be749, #297323)');
    $('#appy_id').html("Low risk (<4.8%) of appendicitis");
    $('#appy_id2').html("Shera's Score");
  }
 else if ((totalScoreOut <= 2 && age_in >= 11 && age_in <= 15 && kids_gender_val == 'male_kid')) {
    //low risk male kids below 11   
    $('.result-text').css('background','-webkit-linear-gradient(left top, #1be749 , #297323 )');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #1be749, #297323 )');
    $('.result-text').css('background','linear-gradient(to bottom right, #1be749, #297323)');
    $('#appy_id').html("Low risk (<4.8%) of appendicitis");
    $('#appy_id2').html("Shera's Score");
  }
 else if ((totalScoreOut >= 3) && (age_in >= 11 || age_in <= 15) && (kids_gender_val == 'male_kid')) {
    //low risk male kids below 11   
  $('.result-text').css('background','-webkit-linear-gradient(left top, #EF7532, #c4005c)');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #EF7532, #c4005c)');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #EF7532, #c4005c)');
    $('.result-text').css('background','linear-gradient(to bottom right, #EF7532, #c4005c)');
    $('#appy_id').html("Moderate or High risk of appendicitis");
    $('#appy_id2').html("Shera's Score");
  }
  else if ((totalScoreOut > 3) && (age_in <= 15) && (kids_gender_val == 'female_kid')) {
    //other risk kids   
  $('.result-text').css('background','-webkit-linear-gradient(left top, #EF7532, #c4005c)');
    $('.result-text').css('background','-o-linear-gradient(bottom right, #EF7532, #c4005c)');
    $('.result-text').css('background','-moz-linear-gradient(bottom right, #EF7532, #c4005c)');
    $('.result-text').css('background','linear-gradient(to bottom right, #EF7532, #c4005c)');
    $('#appy_id').html("Moderate or High risk of appendicitis");
    $('#appy_id2').html("Shera's Score");
  }

  console.log(totalScoreOut);
});

function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} 

//Show and hide function

//timing
function tim0(){
document.getElementById('time_div').style.display ='none';
}

function tim1(){
document.getElementById('time_div').style.display = 'inline-block';
}

//migration
function mig0(){
document.getElementById('pain_migrate').style.display ='none';
}

function mig1(){
document.getElementById('pain_migrate').style.display = 'inline-block';
}

//vomiting
function vomitt0(){
document.getElementById('nausea_vomiting').style.display ='none';
}

function vomitt1(){
document.getElementById('nausea_vomiting').style.display = 'inline-block';
}

//vomiting
function temp0(){
document.getElementById('temp_slider').style.display ='none';
}

function temp1(){
document.getElementById('temp_slider').style.display = 'block';
}

function kid_o(){
  age_val_show = $('#age').val();
  if (age_val_show <= 15){
    document.getElementById('kids_gender').style.display = 'inline-block';
  document.getElementById('temp_slider').style.display = 'block';
  document.getElementById('nausea_vomiting').style.display = 'inline-block';
  document.getElementById('pain_migrate').style.display = 'inline-block';
  document.getElementById('cough_pain').style.display = 'inline-block';
  document.getElementById('anorexia').style.display = 'inline-block';
  document.getElementById('gender_div').style.display = 'none';
  document.getElementById('reb_tenderness').style.display = 'none';
  document.getElementById('crp_slider').style.display = 'none';}
  else {
    document.getElementById('kids_gender').style.display = 'none';
    document.getElementById('temp_slider').style.display = 'none';
    document.getElementById('nausea_vomiting').style.display = 'none';
    document.getElementById('cough_pain').style.display = 'none';
    document.getElementById('anorexia').style.display = 'none';
    document.getElementById('pain_migrate').style.display = 'none';
    document.getElementById('gender_div').style.display = 'inline-block';
    document.getElementById('reb_tenderness').style.display = 'inline-block';
    document.getElementById('crp_slider').style.display = 'block';}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.1.3.min.js