JSFiddle - React, Tailwind, and code Playground

by jelane20

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
	<header></header>
	<div id="content">
		<div id="main">

			<div class="questionContainer">
<!-- question 1 -->
			<span class="question">
		When working within a Kintera Thon event, where can you add the page wrapper to a stand alone webpage and add the link to the left-hand navigation of the event?
		</span>
			<form>
				<input type="radio" value="Event Text" class="answer" name="option">
				Event Text
				<br />
				<input class="answer" type="radio" value="Website Features"  name="option">
				Website Features
				<br />
				<input class="answer" type="radio" value="Website Design"  name="option">
				Website Design
				<input class="submit" type="submit" value="Submit">
			</form>

				<br />
			
			</div>

		</div>
		<a href="#"><img class="start" src="images/start.png" alt="start"/></a>
		
		<div id="bottom">
			<p class="logo">
			test
			</p>
			<p class="newQuiz">
				<a href="#"><img src="images/newquiz.png" / alt="new"></a>
			</p>
			
		</div>
	</div>
	

</body>

CSS

body {
	background-color: #8cbe4f;
	font-family: 'myriad pro', sans-serif;
	color: #fff;
	font-size: 14px;
}

#content {
	margin: 0 auto;
	width: 40em;
	margin-top: 150px;	

}

#main {
	background-image: url('images/newbg2.png');
	background-repeat: no-repeat;
	background-size: 90%;
	width: 95%;
	height: 300px;
	margin:0 auto;
}

.logo {
	font-size: 35px;
	display:inline;
	vertical-align: top;
}

p.newQuiz {
	display: inline-block;
	text-align: right;
	margin-left: 50%;
	vertical-align: top;
	margin-top: 0px;
}

#bottom {
	width: 95%;
	margin-top: 30px;
}

.questionContainer  {
	width: 300px;
	margin-left: 45%;
	padding-top: 15%;
}

.submit {
	display: block;
	margin-top:10px;
}


.start {
	width: 125px;
	height: auto;
	margin-top: -50px;
	margin-left: 55%;
	
}

JavaScript

$(document).ready(function() {
//default
$('.questionContainer').hide();


//start button
	$('.start').click(function() {
	$('.question').show();
	$('.questionContainer').show();
	$('.start').hide();
});

//new quiz
	$('.newQuiz').click(function() {
	$('.start').show();
	$('.questionContainer').hide();
	$('.question').hide();
});

var allQuestions= [
//allQuestions[0].possibleAnswers[0]
{
	question:'When working within a Kintera Thon event, where can you add the page wrapper to a stand alone webpage and add the link to the lefthand navigation of th event?',
	possibleAnswers:['Event Text', 'Website Features', 'Website Design'],
	answer: 1,
	qNum: 1
},

{
	question:'If you or a client are unable to view the custom HTML boxes located in website design, how can this be resolved? ',
	possibleAnswers:['Update the event', 'Clear cache', 'Open the custom cookie tool'],
	answer: 2,
	qNum: 2
},

{
	question:'Where should the meta tags be added within a Kintera Thon event in order to customize what Facebook displays when the share button is chosen? ',
	possibleAnswers:['Custom Header HTML', 'Google Analytics', 'Multi-Language Header HTML'],
	answer: 1,
	qNum: 3
},

{
	question:'A client would like to change text that is not editable through the UI and will likely require a custom script, where will you send the case? ',
	possibleAnswers:['Tier 2 Design queue', 'Professional Services', 'The AE for scoping'],
	answer: 0,
	qNum: 4
},

{
	question:'A client is experiencing odd spacing issues on the homepage of their Kintera Thon event where additional spacing is at the top. What are your next steps? ',
	possibleAnswers:['Submit to design tier 2 queue', 'Submit a CR', 'Check the Homepage text for custom coding and hard returns'],
	answer: 2,
	qNum: 5
}

];


});