Skip to content

Instantly share code, notes, and snippets.

@mikebosco

mikebosco/QuizEndingbad.png

Last active December 11, 2015 15:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikebosco/4624660 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikebosco/4624660 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<title>Are you at risk?</title>
<!-- Analaytics Pixel goes here -->
<link rel="stylesheet" href="quiz_style.css" />
<link href="http://fnt.webink.com/wfs/webink.css/?project=D7209B0B-4EA6-4574-853C-9A3E558BB8A9&fonts=49EB541C-40FA-3D7C-6CB7-A4F272CAD108:f=MinionPro-Regular,A053F1A3-227C-4158-6291-4B5965C1E530:f=NewsGothicBdBT-Reg" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26883868-13']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<legend>Take Our Quiz</legend>
<span id="quiz_header">Here is a quick quiz to find out your risk of a heart attack. If you don't know some of the answers, check with your healthcare provider.</span>
<div id="step1">
<table>
<thead>
<th class="answer-head">Yes</th>
<th class="answer-head">No</th>
<th class="answer-head">I don't Know</th>
<th>&nbsp;</th>
</thead>
<tbody>
<tr>
<td class="top-left quiz-answer">
<input type="radio" name="smoke" value="yes" />
</td>
<td class="top-center quiz-answer">
<input type="radio" name="smoke" value="no" />
</td>
<td class="top-right quiz-answer">
<input type="radio" name="smoke" value="idk" />
</td>
<td class="quiz-copy">
Do you smoke?
</td>
</tr>
<tr>
<td class="left quiz-answer">
<input type="radio" name="bloodpressure" value="yes" />
</td>
<td class="center quiz-answer">
<input type="radio" name="bloodpressure" value="no" />
</td>
<td class="right quiz-answer">
<input type="radio" name="bloodpressure" value="idk" />
</td>
<td class="quiz-copy">
Is your blood pressure 140/90 mmHg or higher, <strong>OR</strong> have you been told by your doctor that your blood pressure is too high?
</td>
</tr>
<tr>
<td class="bottom-left quiz-answer">
<input type="radio" name="cholesterol" value="yes" />
</td>
<td class="bottom-center quiz-answer">
<input type="radio" name="cholesterol" value="no" />
</td>
<td class="bottom-right quiz-answer">
<input type="radio" name="cholesterol" value="idk" />
</td>
<td class="quiz-copy">
Has your doctor told you that your total cholesterol level is 200mg/dL or higher, <strong><strong>OR</strong></strong> your HDL (good cholesterol) is less than 40mg/dL?
</td>
</tr>
</table>
<div class="navigation">
<div class="next_link"><a href="#next" onclick="Step2();">next</a > &gt;&gt; </div>
</div>
</div>
<!-- end step 1 -->
<div id="step2" class="hide">
<table>
<thead>
<th class="answer-head">Yes</th>
<th class="answer-head">No</th>
<th class="answer-head">I don't Know</th>
<th>&nbsp;</th>
</thead>
<tbody>
<tr>
<td class="top-left quiz-answer">
<input type="radio" name="heartattack" value="yes" />
</td>
<td class="top-center quiz-answer">
<input type="radio" name="heartattack" value="no" />
</td>
<td class="top-right quiz-answer">
<input type="radio" name="heartattack" value="idk" />
</td>
<td class="quiz-copy">
Has your father or brother had a heart attack before age 55, <strong>OR</strong> has your mother or sister had one before age 65?
</td>
</tr>
<tr>
<td class="left quiz-answer">
<input type="radio" name="diabetes" value="yes" />
</td>
<td class="center quiz-answer">
<input type="radio" name="diabetes" value="no" />
</td>
<td class="right quiz-answer">
<input type="radio" name="diabetes" value="idk" />
</td>
<td class="quiz-copy">
Do you have diabetes <strong>OR</strong> a fasting blood sugar of 126 mg/dL or higher, <strong>OR</strong> do you need medicine to control your blood sugar?
</td>
</tr>
<tr>
<td class="bottom-left quiz-answer">
<input type="radio" name="over55" value="yes" />
</td>
<td class="bottom-center quiz-answer">
<input type="radio" name="over55" value="no" />
</td>
<td class="bottom-right quiz-answer">
<input type="radio" name="over55" value="idk" />
</td>
<td class="quiz-copy">
Are you over 55 years old?
</td>
</tr>
</table>
<div class="navigation">
<div class="prev_link">&lt;&lt;<a href="#prev" onclick="Step1();">prev</a></div>
<div class="next_link"><a href="#next" onclick="Step3();">next</a > &gt;&gt;</div>
</div>
</div>
<!-- End Step 2 -->
<div id="step3" class="hide">
<table>
<thead>
<th class="answer-head">Yes</th>
<th class="answer-head">No</th>
<th class="answer-head">I don't Know</th>
<th>&nbsp;</th>
</thead>
<tbody>
<tr>
<td class="top-left quiz-answer">
<input type="radio" name="bmi" value="yes" />
</td>
<td class="top-center quiz-answer">
<input type="radio" name="bmi" value="no" />
</td>
<td class="top-right quiz-answer">
<input type="radio" name="bmi" value="idk" />
</td>
<td class="quiz-copy">
Do you have a body mass index (BMI) score of 25 of more?
</td>
</tr>
<tr>
<td class="left quiz-answer">
<input type="radio" name="activity" value="yes" />
</td>
<td class="center quiz-answer">
<input type="radio" name="activity" value="no" />
</td>
<td class="right quiz-answer">
<input type="radio" name="activity" value="idk" />
</td>
<td class="quiz-copy">
Do you get less than a total of 30 minutes of physical activity on most days?
</td>
</tr>
<tr>
<td class="bottom-left quiz-answer">
<input type="radio" name="angina" value="yes" />
</td>
<td class="bottom-center quiz-answer">
<input type="radio" name="angina" value="no" />
</td>
<td class="bottom-right quiz-answer">
<input type="radio" name="angina" value="idk" />
</td>
<td class="quiz-copy">
Has a doctor told you that you have angina (chest pains), <strong>OR</strong> have you had a heart attack?
</td>
</tr>
</table>
<div class="navigation">
<div class="prev_link">&lt;&lt;<a href="#prev" onclick="Step2();">prev</a></div>
<div class="next_link"><a href="#submit" onclick="submit();">submit</a></div>
</div>
</div>
<!-- At Risk Modal -->
<div id="atrisk" class="hide">
<div class="modal-bg"> &nbsp;</div>
<div class="modal-bad">
<p>You are at risk for heart disease.</p>
<p>If you answered "yes" to any of these questions, you're at an increased risk of having a heart attack.</p>
<p>Pledge to wear red today!</p>
<button onclick="brochure();">Download the Brochure</button>
</div>
</div>
<div id="norisk" class="hide">
<div class="modal-bg">&nbsp;</div>
<div class="modal-good">
<p>Congratulations, you are not at risk for heart disease.</p>
<p>If you answered "yes" tp any of these questionss, you're at an increased risk of having a heart attack.</p>
<p>Pledge to wear red today!</p>
<button onclick="brochure();">Download the Brochure</button>
</div>
</div>
<script src="http://ubound.s3.amazonaws.com/JScript/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://ubound.s3.amazonaws.com/JScript/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
function Step1(){
$('#step2').addClass('hide');
$('#step3').addClass('hide');
$('#step1').removeClass('hide');
}
function Step2(){
$('#step1').addClass('hide');
$('#step3').addClass('hide');
$('#step2').removeClass('hide');
track_quiz_1();
}
function Step3(){
$('#step1').addClass('hide');
$('#step2').addClass('hide');
$('#step3').removeClass('hide');
track_quiz_2();
}
function submit(){
check_total();
track_submit();
}
function brochure(){
/*Do nothing atm, this is where the brochure delivery functionality should be implemented */
track_brochure();
}
function track_quiz_1() {
if ($.cookie('quiz1') == null) {
$.cookie('quiz1', true);
_gaq.push(['_trackEvent', 'Buttons', 'Click', 'Quiz1']);
}
}
function track_quiz_2() {
if ($.cookie('quiz2') == null) {
$.cookie('quiz2', true);
_gaq.push(['_trackEvent', 'Buttons', 'Click', 'Quiz2']);
}
}
function track_brochure() {
if ($.cookie('brochure') == null) {
$.cookie('brochure', true);
_gaq.push(['_trackEvent', 'Buttons', 'Click', 'Brochure']);
}
}
function track_submit() {
if ($.cookie('submit') == null) {
$.cookie('submit', true);
_gaq.push(['_trackEvent', 'Buttons', 'Click', 'Submit']);
}
}
function check_total() {
total = 0;
if($('input[name=smoke]:checked').val() == "no" || $('input[name=smoke]:checked').val() == "idk"){
total+= 1;
}
if($('input[name=bloodpressure]:checked').val() == "no" || $('input[name=bloodpressure]:checked').val() == "idk"){
total++;
}
if($('input[name=cholesterol]:checked').val() == "no" || $('input[name=cholesterol]:checked').val() == "idk"){
total++;
}
if($('input[name=heartattack]:checked').val() == "no" || $('input[name=heartattack]:checked').val() == "idk"){
total++;
}
if($('input[name=diabetes]:checked').val() == "no" || $('input[name=diabetes]:checked').val() == "idk"){
total++;
}
if($('input[name=over55]:checked').val() == "no" || $('input[name=over55]:checked').val() == "idk"){
total++;
}
if($('input[name=bmi]:checked').val() == "no" || $('input[name=bmi]:checked').val() == "idk"){
total++;
}
if($('input[name=activity]:checked').val() == "no" || $('input[name=activity]:checked').val() == "idk"){
total++;
}
if($('input[name=angina]:checked').val() == "no" || $('input[name=angina]:checked').val() == "idk"){
total++;
}
if( total == 9) {
$('#norisk').removeClass('hide');
$('#step1').addClass('hide');
$('#step2').addClass('hide');
$('#step3').addClass('hide');
} else {
$('#atrisk').removeClass('hide');
$('#step1').addClass('hide');
$('#step2').addClass('hide');
$('#step3').addClass('hide');
}
}
</script>
</body>
</html>
Raw
quiz_style.css
body {
background: rgb(255, 255, 255);
background: -moz-linear-gradient(271deg, rgb(255, 255, 255) 30%, rgb(229, 229, 229) 70%);
background: -webkit-linear-gradient(271deg, rgb(255, 255, 255) 30%, rgb(229, 229, 229) 70%);
background: -o-linear-gradient(271deg, rgb(255, 255, 255) 30%, rgb(229, 229, 229) 70%);
background: -ms-linear-gradient(271deg, rgb(255, 255, 255) 30%, rgb(229, 229, 229) 70%);
background: linear-gradient(1deg, rgb(255, 255, 255) 30%, rgb(229, 229, 229) 70%);
margin: 0;
padding: 0;
}
body > div, body > span, body > legend{
margin-left: 15px;
}
legend {
color: #00a9e0;
font-size: 24pt;
font-family: NewsGothicBdBT-Reg;
line-height: 25px;
padding-bottom: 15px;
padding-top: 15px;
}
th {
text-align: center;
background-color: #B9B9B9;
color: #FFFFFF;
font-family: Arial-Bold;
padding: 0 8 0 8;
}
td {
border-style: none;
}
.top-left {
border-right: 1px solid #c0c0c0;
}
.top-center {
/* nothing to see here -- move along*/
}
.top-right {
border-left: 1px solid #c0c0c0;
}
.left{
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
}
.center {
border-top: 1px solid #c0c0c0;
}
.right {
border-left: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
}
.bottom-left {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
}
.bottom-center {
border-top: 1px solid #c0c0c0;
}
.bottom-right {
border-left: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
}
.answer-head {
width: 60px;
padding: 5px 0 5px 0;
}
#quiz_header {
color: #181818;
font-family: MinionPro-Regular;
font-size: 14pt;
margin-bottom: 20px;
}
.quiz-copy {
color: #181818;
font-family: MinionPro-Regular;
font-size: 14pt;
}
.quiz-answer {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 40px;
height: 60px;
}
.prev_link {
font-family: Arial-Black;
font-size: 18pt;
font-weight: bold;
color: #00a9e0;
text-align: left;
position: absolute;
}
.prev_link a {
font-family: Arial-Black;
font-size: 16pt;
font-weight: bold;
color: #00a9e0;
text-align: left;
}
.next_link {
font-family: Arial-Black;
font-size: 16pt;
font-weight: bold;
color: #00a9e0;
text-align: right;
padding-right: 30px;
}
.next_link a {
font-family: Arial-Black;
font-size: 16pt;
font-weight: bold;
color: #00a9e0;
text-align: right;
}
.hide {
display: none;
}
/*
.modal-bg {
background-color: rgba(0,0,0,.50);
z-index: 1000;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
}
*/
#atrisk {
margin-left: 20%;
width: 495px;
height: 225px;
background-image: url('QuizEndingGood.png');
background-repeat: repeat-x;
background-size: 2px 235px;
font-family: NewsGothicBdBT-Reg;
color: #FFFFFF;
font-size: 18pt;
}
#atrisk p {
width: 90%;
padding-right: 20px;
padding-left: 10px;
}
#norisk{
margin-left: 20%;
width: 495px;
height: 225px;
background-image: url('QuizEndingBad.png');
background-repeat: repeat-x;
background-size: 2px 235px;
font-family: NewsGothicBdBT-Reg;
color: #FFFFFF;
font-size: 18pt;
}
#norisk p {
width: 90%;
padding-right: 20px;
padding-left: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment