<!--
Online Pregnancy test program wchich makes user fill in a form stating any symptoms that they may be experiencing that is related to preganancy
Created: December 19-20; By: Evan Hall, John Burtt, Gavneet Bhandal, and Maya Shenoy
-->
<!--Create an base html web page-->
<!DOCTYPE html>
<html>
<head>
<!--Set the scale of the orignial page-->
<meta name="viewport" content="width=device-width, inital-scale=1">
<title>Quiz</title>
<!--The style is creating the background for the entire web page created-->
<style>
.active, .collapsible:hover {
background-color: #FDDEE3;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
}
</style>
<!--The style is designing a blue broder around the entire web page created-->
<style>
div {
width: 90%;
border: 10px solid rgb(137, 207, 240);
padding: 30px;
margin: 30px;
}
img {
float: right;
}
</style>
<!--Make the web page felxible to differtnt window sizes without removing or making any information inaccessable-->
<style>
body {
display: flex;
flex-direction: column;
width: 100vw;
justify-content: center;
}
</style>
</head>
<!--The body scope is where the entire quiz and all of the elements on the webpage are added to the site-->
<body>
<form name="quiz" id="quiz" onsubmit="return false"> <!--Create a form named quiz, and make it so when actions are executed the information of the webpage is not reset(e.x. filled in variables)-->
<div>
<!--Title-->
<h1 style="font-family: Verdana;">
Online Pregnancy Quiz
</h1>
<!--Creating a horizontal line across the page to seperate specific text-->
<hr size="3" width="85%" color="black">
<!--Sources the image being used on the quiz web page and configures the image to fit correctly-->
<img src="https://www.sitarambhartia.org/wp-content/uploads/2018/06/Pregnancy-test-kit-1170x520@2x.png" alt="pregnancy_test" width="270" height="150" style="vertical-align:middle;margin:10px 125px 10px 5px">
<!--First paragraph of information is added and configured to fit to the left of the image within the generated horizontal lines -->
<p style="font-size:150%; margin-left:125px;">
Our Goal: We want to give young girls and women in impoverished countries the chance to self-diagnose themselves for being pregnant if they either unable to access a pregnancy test,
whether this be because there are none available to them or having intercourse at a young age is looked down upon. Pharmacies are not nearly as readily available in countries such as Yemen as they are in first world countries
like Canada or America. For this reason we want girls all across the world to have equal access to information about pregnancy and where they can go for more help or further tests.
</p>
<!--Creating a horizontal line across the page to seperate specific text-->
<hr size="3" width="85%" color="black">
<!--Message stating that the test is not 100% accurate, set to be highlighted and have ATTENTION bolded to stand out-->
<p style="background-color: rgb(137, 207, 240);">
<b>ATTENTION:</b>
This quiz is not a replacement for a pregnancy test and should not be used as such,
however if you have no pregnancy tests available to you then this can be used as a preliminary measure. This quiz was also not designed by medical professionals and it is not therefore medical grade.
</p>
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />1. Have you missed your period?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
This is a factor mainly for those with regular menstrual cycles. For those with irregular cycles,
this may not indicate a higher chance of being pregnant.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />2. Have you recently had sexual intercourse wityhout any contraceptives?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
Contraceptives are either a device or a drug that is used to help with preventing pregnancies.
However, if you are sexually active and at the age of child-bearing,
contraceptives may still fail as they are only 99% efficient.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />3. Have your energy levels dropped? Or are you feeling incresed fatigued?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
This is a common early symptom of pregnancy.
This is because the hormone levels of progesterone will increase during pregnancy, causing tiredness.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />4. Have you been experiencing mood swings frequently?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
Due to the drastic hormonal changes in a pregnant woman’s body, you may experience mood swings.
However this is also common throughout a standard menstrual cycle.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />5. Are there physical changes to your breasts (more tender, swollen and darker)?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p> Due to the hormonal changes in a pregnant woman’s body, the breasts will become more sensitive and swollen.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />6. Have you been having aversions to certain foods?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
When you become pregnant your sense of taste may change drastically.
These changes in your body may occur due to the hormonal levels and increasing and decreasing constantly.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />7. Have you been having constant food cravings?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
When you become pregnant you may become more sensitive to certain odors and your sense of taste will change drastically.
These changes in your body may occur due to the hormonal levels and increasing and decreasing constantly.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />8. Recently has your sense of smell been heightened?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
When you become pregnant you may become more sensitive to certain odors.
These changes in your body may occur due to the hormonal levels and increasing and decreasing constantly.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />9. Have you recently been feeling bloated?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p> Close to how it may feel at the start of a menstrual period, pregnancy can cause feelings of bloating due to the hormonal changes.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />10. Have you been having stomach cramps?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p> Early on in the pregnancy, you may encounter pain in your stomach due to your womb expanding, ligaments stretching, etc.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />11. Have you experienced any physical pain in your lower abdomen?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p> Like stomach cramps, pain in your lower abdomen is due to your womb, uterus and pelvis expanding for a the growth of a baby.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />12. Have you been feeling nauseous in the morning?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
Although the cause is not fully clear, nausea is most likely a cause of hormonal changes that the body goes through during pregnancy.
This is commonly known as morning sickness, but it can happen at any time.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />13. Have you had a runny or stuffy nose recently?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
As a result of hormonal changes, mucous membranes in the nose will change as well.
This often leads to a runny or stuffy nose.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />14. Have you been experiencing headaches?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p> Due to the changes that the body goes through during pregnancy, it is common to experience headaches, mostly in the first trimester.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />15. Have you had troubles using the washroom?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
The digestive system will slow due to the hormonal changes that come with pregnancy.
This may lead to constipation.
</div>
<br />
<!--Generating the checkboxes as well as the coresponding questions to go with them -->
<br /> <input type="checkbox" name="questions" />16. Have you felt as though you need to urinate more frequently?
<br />
<!--This is HTML for the pop up text to provide the user with some additional information-->
<button type="button" class="collapsible">Additional Information</button>
<div class="content">
<p>
Your blood will increase in your body during pregnancy, which will cause kidneys to process more fluids that will end up in your bladder.
Therefore you may find yourself using the bathroom more often.
</div>
<br /><br />
<button onclick="showChecked()">Finish</button> <!--Generating the finish button and, adding an onclick event which activates when the button is clicked-->
</div>
<!--This is Javascript code to make all fo the interanl functions work within our webpage-->
<script>
//This is the function that is called on by the buttons which allows them to open the addtional information panel to the user and display all of the information
var coll = document.getElementsByClassName("collapsible");
var i;
//Loops and adds event listeners to all of the additional information buttons which allow the buttons to open
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
//New function to count and display the selected checkboxes at the time that the button is flagged pressed
function showChecked() {
//This if else statement counts all of the checkboxes that have been flagged as checked by the user and then comparing that value to our set bounderies for classifying how likely the user is to be pregnant
if (document.querySelectorAll("input:checked").length <= 4) {
window.location.href = "notPregnantResult.html";
}
else if (document.querySelectorAll("input:checked").length > 4 && document.querySelectorAll("input:checked").length <= 8) {
window.location.href = "maybePregnantResult.html";
}
else if (document.querySelectorAll("input:checked").length >= 9) {
window.location.href = "pregnantResult.html";
}
//Counting all of the inputs under the name fruits and counting the checked boxes as it is 1 click to check the box
document.querySelectorAll("input[name=questions]").forEach(i => {
i.onclick = function () {
}
});
}
}
</script>
</form>
</body>
</html>