Edit on
<div data-role="page" id="edd-calculator-page">

  <!--Set the header text-->
  <div data-role="header">
    <h1>EXPECTED DATE OF DELIVERY CALCULATOR</h1>
    </div>
 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/426789/images.jpeg"/>

  <div role="main" class="ui-content">
    <!--Set the text to instruct the user on what to do. The header id is used when updating the text to display the edd-->
    <p>Use this calculator to estimate the expected delivery date for a pregnant woman.</p>
    <h2 class='EDD_Date'><span>When was the first day of her last period?</span></h2>

    <!--Built in calendar display using jquery mobile. The various data-options can be used to change the look and feel of the
				calendar and limit the dates to certain criteria. Fiddle around to design a calendar you like.-->
    <div>
      <input type="text" id="EDD-input" data-role="datebox" data-theme="d" data-options='{"mode":"calbox", "overrideDateFormat":"%Y-%m-%d", "overrideHeaderFormat": "%A, %-d %B, %Y", "overrideDateFieldOrder":["d","m","y"], "useHeader":false, "useInline": true, "hideInput": true, "themeDateToday": "d", "themeDate": "a", "beforeToday": true}'
      />
    </div>
  </div>

  <!--Set the footer content. Pressing the calculate button calls the CalculateEDD() with the onclick method. This is 
			a javascript function used to determine the EDD.-->
  <div data-role="footer">
    <a href='' data-role='button' onclick="CalculateEDD('EDD-input')">Calculate</a>
  </div>

</div>
<div data-role="page" id="FirstTrimesterInformation">
  <div data-role="header">
    <h1>EXPECTED DATE OF DELIVERY CALCULATOR</h1>
    </div>
  
    <div data-role="main" class="ui-content">
  <h2 id='EDD_Date1'><span>When was the first day of her last period?</span></h2>
  <p>
  <h1>First Trimester (From week 1- week 13)</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/426789/first_trimester.jpg"/>
  You may feel nauseous – avoid foods with too much fat and spices. Eat dry bread or a dry biscuit when you wake up. You should take iron and folate pills – both help your baby grow. You will start looking rounder and your breasts will get heavier. Eat a variety of fresh food so that you and your baby get the vitamins you both need. 
  <br></br>

</p>
<h1> Guidelines on Baby growth</h1>
<ul>
  <li> Head develops</li>
  <li>Eyes are visible</li>
  <li> Toes and fingernails develop</li>
  <br></br>
 
</ul>
   <p>This survey consists out of 10 questions. Each question has 4 answers which are scored on a scale from 0 to 3. After the survey is administered, the scores should be automatically added up.</p>
</div>

<div data-role="footer">
    <a href='#SurveyQuestions' data-role='button'>Take a survery</a>
</div>

</div>
<div data-role="page" id="SurveyQuestions">
    <div data-role="header">
    <h1>EXPECTED DATE OF DELIVERY CALCULATOR</h1>
    </div>
  
  <h2 id='EDD_Date4'><span>Depression Calculator</span></h2>
  
</div>

<div data-role="page" id="SecTrimesterInformation">
    <div role="main" class="ui-content">
         <div data-role="header">
    <h1>EXPECTED DATE OF DELIVERY CALCULATOR</h1>
    </div>
  <h2 id='EDD_Date2'><span>When was the first day of her last period?</span></h2>
  <h1> Second Trimester (From week 14- week 27)</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/426789/Second-Trimester.jpg"/>
  <p>
    Go for check-ups regularly for high blood pressure. You may feel your baby move and kick inside you. You and your baby need minerals like calcium. Drink milk or maas every day. 
    <br></br>
<h1>Guidelines on Baby growth</h1>

  <ul>
    <li> Gender is apperent</li>
    <li> Skeleton develops bones</li>
    <li> Lungs develop</li>
    <li> Hair becames visible</li>
    <li> May Respond to mother's voice</li>
    
    <br></br>
  <p>This survey consists out of 10 questions. Each question has 4 answers which are scored on a scale from 0 to 3. After the survey is administered, the scores should be automatically added up. A score greater than 14 means the woman  needs to seek medical help.A score less than 14 means that the women is doing okay.To continue click the TAKE A SURVEY BUTTON</p>
</ul>
  
  </p>
</div>
 <div data-role="footer">
    <a href='#SurveyQuestions' data-role='button'>Take a survery</a>
  </div>

</div>
<div data-role="page" id="SurveyQuestions">
     <div data-role="header">
    <h1>EXPECTED DATE OF DELIVERY CALCULATOR</h1>
    </div>
  
  <h2 id='EDD_Date5'><span>Depression Calculator</span></h2>
  
</div>
</div>

<div data-role="page" id="ThirdTrimesterInformation">
    <div data-role="main" class="ui-content">
  <h2 id='EDD_Date3'><span>When was the first day of her last period?</span></h2>
  <p>
  <h1>Third Trimester(From week 28- week 40)</h1>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/426789/images-2.jpeg"/>
     Your body is preparing to give birth – you may get practice contractions. Get the things you will need for the birth: pyjamas and wash things. Put them in a bag so you can go straight to the hospital when labour starts.
  <br></br>
<h1>Guidelines on Baby Growth</h1>
    <ul>
      <li>Baby's eye open</li>
      <li>Baby's bones are fully developed</li>
      <li>Nervous sysstem development continues</li>
      <li>Due date arrives</li>
      
      <br></br>
  <p>This survey consists out of 10 questions. Each question has 4 answers which are scored on a scale from 0 to 3. After the survey is administered, the scores should be automatically added up. A score greater than 14 means the woman  needs to seek medical help.A score less than 14 means that the women is doing okay.To continue click the TAKE A SURVEY BUTTON</p>
  
</ul>
  </p>
</div>
<div data-role="footer">
    <a href='#SurveyQuestions' data-role='button'>Take a survery</a>
  </div>

</div>

<div data-role="page" id="SurveyQuestions">
    <div data-role="main" class="ui-content">
  <h2><span>Depression Calculator</span></h2>
  <h1>Questions</h1>
  
<h2 id='Question'><span>how do you feel</span></h2>
  <a href='' data-role='button' onclick='SurveyOnClick(0)'>Never</a>
  <a href='' data-role='button' onclick='SurveyOnClick(1)'>Not really</a>
  <a href='' data-role='button' onclick='SurveyOnClick(2)'>Yes, sometimes</a>
  <a href='' data-role='button' onclick='SurveyOnClick(3)'>Yes, quite a lot</a>
  
</div>
</div>

</div>
  <div data-role="page" id="Results">
        <div data-role="main" class="ui-content">
  <h2 id='EDD_Re'><span>If the patient has a score that is greater than 14, refer them to seek medical help </span></h2>
    
    <p id='EDD_R'><span>If the patient has a score that is greater than 14, refer them to seek medical help </span></p>
    </div>
    <div data-role="footer">
    <a href='#edd-calculator-page' data-role='button'>Back</a>
    
</div>
*{
   background-color:#ffe6e6 !important;
}
body {
  text-align: center;
}

li{
  text-align: left;
  background-color: #ffb3ff;
}

.ui-header .ui-title {
  white-space: normal;
  margin: 0.6em 10% 0.8em !important;
}

.ui-footer .ui-btn {
  overflow: visible !important;
  white-space: normal !important;
  padding: 14px;
  font-size: 16px;
  background-color: lightblue !important;
}

.ui-datebox-inline,
.ui-datebox-inlineblind,
.ui-datebox-container {
  border:  !important;
}

.ui-datebox-container {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: 100% !important;
  background-color: transparent;
}

.ui-field-contain {
  border: 0;
}
p{
  font-size: 20px;
  text-align:left;
   border:  white;
  border-radius: 25px;
}
      // This function takes an input date, defined by the name property and calculates the EDD
      // using the moment.js library. The EDD is calculated by adding 280 days to the input date
      // and the format is changed to be more reader-friendly.
      // Finally, the text of the header is then updated to display on screen.

      //     function CalculateEDD(name)       // This function takes an input date, defined by the name property and calculates the EDD
      // using the moment.js library. The EDD is calculated by adding 280 days to the input date
      // and the format is changed to be more reader-friendly.
      // Finally, the text of the header is then updated to display on screen.

      function CalculateEDD(id) {
        var date = $("#" + id).val();
        var edd = moment(date).add(280, 'days').format('DD MMM YYYY');
        $("#EDD_Date").html("Your estimated EDD is:   " + edd);

        var firstTri = moment(date).add(7 * 13, 'days');
        var secTri = moment(date).add(27 * 7, 'days');
        var thirdTri = moment(date).add(40 * 7, 'days');
        var now = moment();

        if (moment(now).isBefore(firstTri)) {
          console.log("You are in your First Trimester");
          $(":mobile-pagecontainer").
          pagecontainer("change", "#FirstTrimesterInformation");
          $("#EDD_Date1").html("Your estimated EDD is:   " + edd);
        } else if (moment(now).isBefore(secTri)) {
          console.log("You are in your Second Trimester");
          $(":mobile-pagecontainer").
          pagecontainer("change", "#SecTrimesterInformation");

          $("#EDD_Date2").html("Your estimated EDD is:   " + edd);
        } else if (moment(now).isBefore(thirdTri)) {
          $(":mobile-pagecontainer").
          pagecontainer("change", "#ThirdTrimesterInformation");
          $("#EDD_Date3").html("Your estimated EDD is:   " + edd);
        }

      };
      //when a button is clicked, it must add or count
      //proceed to a next page
      var Questions = ["1.I have blamed myself when things went wrong, and it wasn’t my fault", "2.I have been worried and I don’t know why", "3.I have felt scared or panicky and I don’t know why", "4.I have had difficulty in coping with things", "5.I have thought of harming myself or ending my life", "6.I have not been able to laugh and see the funny side of things", "7.I have not looked forward with enjoyment to things", "8.I have been so unhappy that I have had difficulty sleeping", "9.I have felt sad and miserable", "10.I have been so unhappy that I have been crying"];
      var score = 0;
      var QuestionNum = 0;

      function SurveyOnClick(answer) {
        console.log("you pressed a " + answer);
        score = score + answer;
        if (QuestionNum < Questions.length) {
          console.log("Your score is " + score);

          $("#Question").html(Questions[QuestionNum++]);
        } else {
          console.log("Show result");

          //show result
          $(":mobile-pagecontainer").
          pagecontainer("change", "#Results");
          $("#EDD_Re").html("Your score is " + score);
          if (score < 14) {
            console.log("The patient is doing great and encourage them to keep up the good work! ");

            $("#EDD_R").html("The patient is doing great and encourage them to keep up the good work!");
          } else {
            $("#EDD_R").html("The patient has a score that is greater than 14, refer them to seek medical help from professionals");
          }
          score=0;
          QuestionNum=0;
          $("#Question").html(Questions[0]);
          }
        
      };
      SurveyOnClick(0);

        
Rerun