Difference between revisions of "Team:Purdue/Quiz"

 
(58 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
 
+
{{:Team:Purdue/NavBar}}
 
<html>
 
<html>
 +
 +
 +
<!-- TODO: add pictures to the questions -->
  
 
<head>
 
<head>
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:Purdue/NavBarCSS?action=raw&ctype=text/css" />
 
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:Purdue/BootstrapCSS?action=raw&ctype=text/css" />
 
 
   
 
   
−
</head>
+
<style>
 +
#body{
 +
text-align: center;
 +
}
  
−
<body>
+
#HQ_page p
 +
{font-size:18px;
 +
}
  
 +
</style>
 +
</head>
  
 +
<body>
 +
<div class="spacer-small"></div>
 +
<div class="spacer-small"></div>
 +
<div style="display:flex;justify-content:center;">
 +
<table style="border-style:solid;border-width:2px;width:1200px;height:800px;">
 +
<tr>
 +
<td>
 +
<div class="basic-page-body" id="body" >
 
<h1 id = "questionNumber"> Question 1 </h1>
 
<h1 id = "questionNumber"> Question 1 </h1>
−
<p id="question"> Men can also get yeast infections? </p>
+
<p id="question" style="font-size:24px;text-align:center;"> Men can also get yeast infections? </p>
−
<button id="yes" onclick="correct=yesAnswer(counter,correct)"> Yes </button>
+
<div class="clear"></div>
−
<button id="no" onclick="correct=noAnswer(counter,correct)"> No </button>
+
<div class="clear"></div>
 +
<button id="yes" class="btn btn-warning" style="Width:49%;" onclick="correct=yesAnswer(counter,correct)"> Yes </button>
 +
<button id="no" class="btn btn-warning" style="Width:49%;" onclick="correct=noAnswer(counter,correct)"> No </button>
 
<h2 id="Commentary"></h2>
 
<h2 id="Commentary"></h2>
 
<div class="clear"></div>
 
<div class="clear"></div>
 
<div class="clear"></div>
 
<div class="clear"></div>
 
<div class="clear"></div>
 
<div class="clear"></div>
 +
<div style="border-style:solid;visibility:hidden;" id="button">
 
<p id="Description"></p>
 
<p id="Description"></p>
−
<button style="visibility:hidden;" onclick="counter=nextQuestion(counter)" id="button">Next Question</button>
+
<div class="spacer-small" ></div>
−
 
+
<button style="Width:59%;" class="btn btn-warning" onclick="counter=nextQuestion(counter)" id="btn" >Next Question</button>
 +
<div class="clear"></div>
 +
<div class="clear"></div>
 +
</div>
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 
<script>
 
<script>
 
var counter=0;
 
var counter=0;
Line 40: Line 67:
 
         divi.appendChild(p);
 
         divi.appendChild(p);
 
    
 
    
 +
}
 +
 +
function questionReset(question,number){
 +
document.getElementById("questionNumber").innerHTML= number;
 +
document.getElementById("question").innerHTML= question;
 +
document.getElementById("button").style.visibility="hidden";
 +
document.getElementById("Commentary").innerHTML="";
 +
document.getElementById("Description").innerHTML="";
 +
                document.getElementById("yes").style.visibility="visible";
 +
                document.getElementById("no").style.visibility="visible";
 
}
 
}
  
Line 47: Line 84:
 
// First Question Answer
 
// First Question Answer
 
   if(cnt==0){
 
   if(cnt==0){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Correct!";
 
document.getElementById("Commentary").innerHTML="Correct!";
−
document.getElementById("Description").innerHTML="The main way men get yeast infections is through "+
+
                document.getElementById("Commentary").style.color="green";
−
"intercourse with women whom is infected.";
+
document.getElementById("Description").innerHTML="The most common way men can contract yeast infections is during intercourse with another women who has a yeast infection.";
 
document.getElementById("button").style.visibility = "visible";
 
document.getElementById("button").style.visibility = "visible";
 
numCorrect =numCorrect + 1;
 
numCorrect =numCorrect + 1;
Line 55: Line 94:
 
// Second Question Answer
 
// Second Question Answer
 
else if(cnt==1){
 
else if(cnt==1){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Correct!";
 
document.getElementById("Commentary").innerHTML="Correct!";
−
document.getElementById("Description").innerHTML="C. Albicans exists in two different forms. There is a white form and an opaque form. <br>"+
+
                document.getElementById("Commentary").style.color="green";
−
"white gains the ability to borrow through skin and is often the cause of yeast infections in the blood <br>"+
+
document.getElementById("Description").innerHTML="<i>C. Albicans</i> exists in two different forms. There is a white form and an opaque form. <br>"+
−
"opaque is a more fertile form where it can reproduce upwards to 300% faster. This form normally causes mucosal infections";
+
"The white form gains the ability to borrow through skin and is often the cause of yeast infections in the blood. <br>"+
 +
"The opaque form is a more fertile form where it can reproduce upwards to 300% faster. This form normally causes mucosal infections.";
 
document.getElementById("button").style.visibility= "visible";
 
document.getElementById("button").style.visibility= "visible";
 
numCorrect = numCorrect + 1;
 
numCorrect = numCorrect + 1;
Line 65: Line 107:
 
// Third Question Answer
 
// Third Question Answer
 
else if(cnt==2){
 
else if(cnt==2){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Incorrect!";
 
document.getElementById("Commentary").innerHTML="Incorrect!";
−
document.getElementById("Description").innerHTML=" While the test is okay to use to determine a yeast infection, the test doesn't directly detect for a yeast.<br>"+
+
                document.getElementById("Commentary").style.color="red";
−
"Instead, it checks the pH of the region. If it is a bacterial infection, it will have a raised pH, otherwise it is likely a yeast infection,<br>"+
+
document.getElementById("Description").innerHTML=" The test doesn't detect for the presence of yeast directly.<br>"+
−
"This leaves room for error, as sometimes, the symptoms of a yeast infection can be from an alergic reaction, this will also not raise pH.<br>"+
+
"Instead, it detects the pH of the region. If it is a bacterial infection, it will have a higher pH. Otherwise, it is likely a yeast infection.<br>"+
−
"Also, sometimes things like creams or viral STI's or other things can cause a rise in the pH, making the test read a bacterial infection instead of a yeast infection.";
+
"This leaves room for error because the symptoms of a yeast infection can be from an allergic reaction, this will also not raise pH. <br>"+
 +
"Also, sometimes things like creams or viral STI's or other things can cause a rise in the pH, making the test read a bacterial infection instead of a yeast infection. There are many other factors other than these that can skew pH to cause inaccurate results.";
 
document.getElementById("button").style.visibility="visible";
 
document.getElementById("button").style.visibility="visible";
 
                 question3 = 0;
 
                 question3 = 0;
Line 76: Line 121:
 
// Fourth Question Answer
 
// Fourth Question Answer
 
else if(cnt==3){
 
else if(cnt==3){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Correct";
 
document.getElementById("Commentary").innerHTML="Correct";
−
document.getElementById("Description").innerHTML="We use split Tyrosinase and pqsR and join each half with a split HRP. In the presence in Farnesol and Tyrosol, Tyrosinase and pqsR will bond to it<br>"+
+
                document.getElementById("Commentary").style.color="green";
−
"Each half will come together and reform, this will then allow the HRP to reform and catalyze a reaction to produce a visible blue substrate.";
+
document.getElementById("Description").innerHTML="We use split tyrosinase and pqsR and join each half with a split HRP. In the presence in farnesol and tyrosol, tyrosinase and pqsR will bond to it.<br>"+
 +
"Each half will come together and reform. This will then allow the HRP to reform and catalyze a reaction to produce a visible blue substrate.";
 
document.getElementById("button").style.visibility="visible";
 
document.getElementById("button").style.visibility="visible";
 
numCorrect = numCorrect  + 1;
 
numCorrect = numCorrect  + 1;
 
}
 
}
 
else if(cnt==4){
 
else if(cnt==4){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Incorrect";
 
document.getElementById("Commentary").innerHTML="Incorrect";
 +
                document.getElementById("Commentary").style.color="red";
 
document.getElementById("Description").innerHTML="Current modern methods use antibodies which are somewhat expensive to produce and therefore expensive to purchase.<br>"+
 
document.getElementById("Description").innerHTML="Current modern methods use antibodies which are somewhat expensive to produce and therefore expensive to purchase.<br>"+
 
"Furthermore, the anitbodies are detected via fluoresence and a fluoresence microscope can cost between 1.5k to 5k USD.<br>"+
 
"Furthermore, the anitbodies are detected via fluoresence and a fluoresence microscope can cost between 1.5k to 5k USD.<br>"+
Line 104: Line 155:
 
     // First Question Answer
 
     // First Question Answer
 
if(cnt==0){
 
if(cnt==0){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Incorrect";
 
document.getElementById("Commentary").innerHTML="Incorrect";
 +
                document.getElementById("Commentary").style.color="red";
 
document.getElementById("Description").innerHTML="The main way men get yeast infections is through "+
 
document.getElementById("Description").innerHTML="The main way men get yeast infections is through "+
 
"intercourse with women whom is infected.";
 
"intercourse with women whom is infected.";
Line 112: Line 166:
 
// Second Question Answer
 
// Second Question Answer
 
else if(cnt==1){
 
else if(cnt==1){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Incorrect";
 
document.getElementById("Commentary").innerHTML="Incorrect";
−
document.getElementById("Description").innerHTML="C. Albicans exists in two different forms. There is a white form and an opaque form. <br>"+
+
                document.getElementById("Commentary").style.color="red";
 +
document.getElementById("Description").innerHTML="<i>C. Albicans</i> exists in two different forms. There is a white form and an opaque form. <br>"+
 
"white gains the ability to borrow through skin and is often the cause of yeast infections in the blood <br>"+
 
"white gains the ability to borrow through skin and is often the cause of yeast infections in the blood <br>"+
 
"opaque is a more fertile form where it can reproduce upwards to 300% faster. This form normally causes mucosal infections";
 
"opaque is a more fertile form where it can reproduce upwards to 300% faster. This form normally causes mucosal infections";
Line 121: Line 178:
 
 
 
else if(cnt==2){
 
else if(cnt==2){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Correct";
 
document.getElementById("Commentary").innerHTML="Correct";
 +
                document.getElementById("Commentary").style.color="green";
 
document.getElementById("Description").innerHTML=" While the test is okay to use to determine a yeast infection, the test doesn't directly detect for a yeast infection."+
 
document.getElementById("Description").innerHTML=" While the test is okay to use to determine a yeast infection, the test doesn't directly detect for a yeast infection."+
 
"Instead, it checks the pH of the region. If it is a bacterial infection, it will have a raised pH, otherwise it is likely a yeast infection,"+
 
"Instead, it checks the pH of the region. If it is a bacterial infection, it will have a raised pH, otherwise it is likely a yeast infection,"+
Line 132: Line 192:
 
 
 
else if(cnt==3){
 
else if(cnt==3){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Incorrect";
 
document.getElementById("Commentary").innerHTML="Incorrect";
−
document.getElementById("Description").innerHTML="We use split Tyrosinase and pqsR and join each half with a split HRP. In the presence in Farnesol and Tyrosol, Tyrosinase and pqsR will bond to it<br>"+
+
                document.getElementById("Commentary").style.color="red";
 +
document.getElementById("Description").innerHTML="We use split tyrosinase and pqsR and join each half with a split HRP. In the presence in farnesol and tyrosol, tyrosinase and pqsR will bond to it<br>"+
 
"Each half will come together and reform, this will then allow the HRP to reform and catalyze a reaction to produce a visible blue substrate.";
 
"Each half will come together and reform, this will then allow the HRP to reform and catalyze a reaction to produce a visible blue substrate.";
 
document.getElementById("button").style.visibility="visible";
 
document.getElementById("button").style.visibility="visible";
Line 139: Line 202:
 
}
 
}
 
else if(cnt==4){
 
else if(cnt==4){
 +
                document.getElementById("yes").style.visibility="hidden";
 +
                document.getElementById("no").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="Correct";
 
document.getElementById("Commentary").innerHTML="Correct";
 +
                document.getElementById("Commentary").style.color="green";
 
document.getElementById("Description").innerHTML="Current modern methods use antibodies which are somewhat expensive to produce and therefore expensive to purchase.<br>"+
 
document.getElementById("Description").innerHTML="Current modern methods use antibodies which are somewhat expensive to produce and therefore expensive to purchase.<br>"+
 
"Furthermore, the anitbodies are detected via fluoresence and a fluoresence microscope can cost between 1.5k to 5k USD.<br>"+
 
"Furthermore, the anitbodies are detected via fluoresence and a fluoresence microscope can cost between 1.5k to 5k USD.<br>"+
Line 161: Line 227:
 
// Second Question
 
// Second Question
 
if(cnt==0){
 
if(cnt==0){
−
document.getElementById("questionNumber").innerHTML= "Question 2";
+
                questionReset("<i>C. Albicans</i> can exisit in two different forms which produce different molecules?","Question 2");
−
document.getElementById("question").innerHTML= "C. Albicans can exisit in two different forms which produce different molecules?";
+
−
document.getElementById("button").style.visibility="hidden";
+
−
document.getElementById("Commentary").innerHTML="";
+
−
document.getElementById("Description").innerHTML="";
+
 
}
 
}
 
// Third Question
 
// Third Question
 
else if(cnt==1){
 
else if(cnt==1){
−
document.getElementById("questionNumber").innerHTML= "Question 3";
+
                questionReset("Over-the-counter yeast infection tests specifically test for the presence of invasive yeast when diagnosing a yeast infection?","Question 3");
−
document.getElementById("question").innerHTML= "Yeast infection kits that you buy from over the counter test specifically for yeast when diagnosing a yeast infection?";
+
−
document.getElementById("button").style.visibility="hidden";
+
−
document.getElementById("Commentary").innerHTML="";
+
−
document.getElementById("Description").innerHTML="";
+
−
+
 
}
 
}
 
// Fourth Question
 
// Fourth Question
 
else if(cnt==2){
 
else if(cnt==2){
−
document.getElementById("questionNumber").innerHTML= "Question 4";
+
                questionReset("Split proteins are proteins that are transcribed as two different halves of one protein, but after translation can form together to create a functional protein?","Question 4");
−
document.getElementById("question").innerHTML= "Split Proteins are proteins that are transcribed in two different halfs, but then form together to create a functional protein.";
+
−
document.getElementById("button").style.visibility="hidden";
+
−
document.getElementById("Commentary").innerHTML="";
+
−
document.getElementById("Description").innerHTML="";
+
 
}
 
}
 
 
 
// Fifth Question
 
// Fifth Question
 
else if(cnt==3){
 
else if(cnt==3){
−
+
        questionReset("Invasive yeast infections are cheap to diagnose, (other than using a blood culture test). ","Question5");
−
document.getElementById("questionNumber").innerHTML= "Question 5";
+
−
document.getElementById("question").innerHTML= "Invasive Yeast Infections are cheap to diagnose, (besides growing a culture from blood.) ";
+
−
document.getElementById("button").style.visibility="hidden";
+
−
document.getElementById("Commentary").innerHTML="";
+
−
document.getElementById("Description").innerHTML="";
+
 
 
 
}
 
}
Line 200: Line 248:
 
document.getElementById("questionNumber").innerHTML= "Results";
 
document.getElementById("questionNumber").innerHTML= "Results";
 
document.getElementById("question").innerHTML= "Thank you for taking our quiz";
 
document.getElementById("question").innerHTML= "Thank you for taking our quiz";
−
document.getElementById("button").style.visibility="hidden";
+
document.getElementById("btn").style.visibility="hidden";
 
document.getElementById("Commentary").innerHTML="";
 
document.getElementById("Commentary").innerHTML="";
 
document.getElementById("Description").innerHTML="You got " +correct+" out of 5 correct";
 
document.getElementById("Description").innerHTML="You got " +correct+" out of 5 correct";
Line 219: Line 267:
 
                 para5.innerHTML="For more information about different tests check out our challenge analysis";
 
                 para5.innerHTML="For more information about different tests check out our challenge analysis";
 
                 createLink("https://2018.igem.org/Team:Purdue/Description"," Click here to go to Project Description",para5);  
 
                 createLink("https://2018.igem.org/Team:Purdue/Description"," Click here to go to Project Description",para5);  
−
                 document.body.append(divi);
+
                 document.getElementById("body").appendChild(divi);
 
                  
 
                  
 
}
 
}

Latest revision as of 01:32, 18 October 2018

Bootstrap Example

Question 1

Men can also get yeast infections?