jweinst1
3/10/2019 - 7:24 AM
This site is a modified template than can take a multiple choice question in jquery
This site is a modified template than can take a multiple choice question in jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Josh's website</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Vida's Website</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>Welcome</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. This is really just filler text to extend the page. You can add any content or widget to these pages, but we're keeping these simple.</p>
<h3> Question Portion: </h3>
<p>Hello! Welcome to my webiste. Are you a man or a woman?</p>
<form>
<label for="radio-choice-0a">
<input type="radio" name="radio-choice-0" id="radio-choice-0a">Man
</label>
<label for="radio-choice-0b">
<input type="radio" name="radio-choice-0" id="radio-choice-0b" class="custom">Woman
</label>
</form>
<p><button data-role="button" id="radio-choice-submit">Submit Answer</button></p>
<h3>Check out my site:</h3>
<p><a href="#two" data-role="button">Show page "two"</a></p>
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<div data-role="page" id="three" data-theme="b">
<div data-role="header">
<h1>answer</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h2 id="result-answer">here</h2>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div>
<script>
$('#radio-choice-submit').click(function() {
var choice = $('input[name=radio-choice-0]:checked');
// we don't know the text of the choice, but we knew the id's
var choiceId = choice.attr('id');
if(choiceId === "radio-choice-0a") {
$('#result-answer').text('Your a man!');
} else if(choiceId === "radio-choice-0b") {
$('#result-answer').text('Your a woman!');
}
// this invokes the jquery page
window.location.href = '#three';
return;
});
</script>
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1>Two</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>