unable to move quiz.php code onto my css/html template

maromaliz · February 25, 2013

I am currently working on a php quiz which i have completed and is running perfectly. However the problem i am now having is, how do i move the quiz.php code to my css/html template and make the quiz appear there.

the following are the codes for quiz.php pages

index page:

<?php

$msg = "";

if(isset($_GET['msg'])){

$msg = $_GET['msg'];

$msg = strip_tags($msg);

$msg = addslashes($msg);

}

?>

<!doctype html>

<head>

function startQuiz(url){

window.location = url;

}

</script>

</head>

<body>

<?php echo $msg; ?>

<h3>Click below when you are ready to start the quiz</h3>

<button onclick="startQuiz('quiz.php?question=1')">Click Here To Begin</button>

</body>

</html>

questions.php

<?php

session_start();

require_once("scripts/connect_db.php");

$arrCount = "";

if(isset($_GET['question'])){

$question = preg_replace('/[^0-9]/', "", $_GET['question']);

$output = "";

$answers = "";

$q = "";

$sql = mysql_query("SELECT id FROM questions");

$numQuestions = mysql_num_rows($sql);

if(!isset($_SESSION['answer_array']) || $_SESSION['answer_array'] < 1){

$currQuestion = "1";

}else{

$arrCount = count($_SESSION['answer_array']);

}

if($arrCount > $numQuestions){

unset($_SESSION['answer_array']);

header("location: index.php");

exit();

}

if($arrCount >= $numQuestions){

echo 'finished|<p>There are no more questions. Please enter your first and last name and click next</p>

</form>';

exit();

}

$singleSQL = mysql_query("SELECT * FROM questions WHERE id='$question' LIMIT 1");

while($row = mysql_fetch_array($singleSQL)){

$id = $row['id'];

$thisQuestion = $row['question'];

$type = $row['type'];

$question_id = $row['question_id'];

$q = '<h2>'.$thisQuestion.'</h2>';

$sql2 = mysql_query("SELECT * FROM answers WHERE question_id='$question' ORDER BY rand()");

while($row2 = mysql_fetch_array($sql2)){

$answer = $row2['answer'];

$correct = $row2['correct'];

$answers .= '<label style="cursor:pointer;"><input type="radio" name="rads" value="'.$correct.'">'.$answer.'</label>

';

}

$output = ''.$q.','.$answers.',<span id="btnSpan"><button onclick="post_answer()">Submit</button></span>';

echo $output;

}

?>

quiz.php

<?php

session_start();

if(isset($_GET['question'])){

$question = preg_replace('/[^0-9]/', "", $_GET['question']);

$next = $question + 1;

$prev = $question - 1;

if(!isset($_SESSION['qid_array']) && $question != 1){

$msg = "Sorry! No cheating.";

header("location: index.php?msg=$msg");

exit();

}

if(isset($_SESSION['qid_array']) && in_array($question, $_SESSION['qid_array'])){

$msg = "Sorry, Cheating is not allowed. You will now have to start over. Haha.";

unset($_SESSION['answer_array']);

unset($_SESSION['qid_array']);

session_destroy();

header("location: index.php?msg=$msg");

exit();

}

if(isset($_SESSION['lastQuestion']) && $_SESSION['lastQuestion'] != $prev){

$msg = "Sorry, Cheating is not allowed. You will now have to start over. Haha.";

unset($_SESSION['answer_array']);

unset($_SESSION['qid_array']);

session_destroy();

header("location: index.php?msg=$msg");

exit();

}

?>

<!doctype html>

<html>

<head>

function countDown(secs,elem) {

var element = document.getElementById(elem);

element.innerHTML = "You have "+secs+" seconds remaining.";

if(secs < 1) {

var xhr = new XMLHttpRequest();

var url = "userAnswers.php";

var vars = "radio=0"+"&qid="+<?php echo $question; ?>;

xhr.open("POST", url, true);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {

if(xhr.readyState == 4 && xhr.status == 200) {

alert("You did not answer the question in the allotted time. It will be marked as incorrect.");

clearTimeout(timer);

}

xhr.send(vars);

document.getElementById('counter_status').innerHTML = "";

document.getElementById('btnSpan').innerHTML = '<h2>Times Up!</h2>';

document.getElementById('btnSpan').innerHTML += '<a href="quiz.php?question=<?php echo $next; ?>">Click here now</a>';

}

secs--;

var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);

}

</script>

function getQuestion(){

var hr = new XMLHttpRequest();

hr.onreadystatechange = function(){

if (hr.readyState==4 && hr.status==200){

var response = hr.responseText.split("|");

if(response[0] == "finished"){

document.getElementById('status').innerHTML = response[1];

}

var nums = hr.responseText.split(",");

document.getElementById('question').innerHTML = nums[0];

document.getElementById('answers').innerHTML = nums[1];

document.getElementById('answers').innerHTML += nums[2];

}

hr.open("GET", "questions.php?question=" + <?php echo $question; ?>, true);

hr.send();

}

function x() {

var rads = document.getElementsByName("rads");

for ( var i = 0; i < rads.length; i++ ) {

if ( rads.checked ){

var val = rads.value;

return val;

}

function post_answer(){

var p = new XMLHttpRequest();

var id = document.getElementById('qid').value;

var url = "userAnswers.php";

var vars = "qid="+id+"&radio="+x();

p.open("POST", url, true);

p.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

p.onreadystatechange = function() {

if(p.readyState == 4 && p.status == 200) {

document.getElementById("status").innerHTML = '';

alert("Thanks, Your answer was submitted"+ p.responseText);

var url = 'quiz.php?question=<?php echo $next; ?>';

window.location = url;

}

p.send(vars);

document.getElementById("status").innerHTML = "processing...";

}

</script>

<script>

window.oncontextmenu = function(){

return false;

}

</script>

</head>

<body onload="getQuestion()">

<div id="status">

<div id="counter_status"></div>

<div id="question"></div>

<div id="answers"></div>

</div>

<script type="text/javascript">countDown(20,"counter_status");</script>

</body>

</html>

and this code for the html/css template

index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<div class="BackgroundGradient"> </div>

<div class="BodyContent">

<div class="Header">

<div class="HeaderTitle">

<h1><a href="#"><img src="images/dixons.jpg" alt=""></a></h1>

<h2></h2>

</div>

</div><div class="Menu">

<ul><li><a href="#" class="ActiveMenuButton"><span>Home</span></a></li> <li><a href="#" class="MenuButton"><span>Tutorial</span></a></li> <li><a href="#" class="MenuButton"><span>Quiz</span></a></li> <li><a href="#" class="MenuButton"><span>Login</span></a></li></ul>

</div><div class="Columns"><div class="Footer"></div>

</div>

<p class="BackLink"><br/>

</p>

<p class="BackLink"> </p>

</body>

</html>

and this is the css for the webpage:

body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#FFFAFF;color:#000;background:#FFFAFF url('images/') repeat;}

ul{margin:5px;padding-left:20px;}

.BodyContent{position:relative;left:0;top:0;width:100%;margin:0 auto 0 auto;}

.BackgroundGradient{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1000;background:url('images/BackgroundGradient.png') repeat-x;}

.Border{position:relative;z-index:1;overflow:hidden;padding:23px 23px 23px 23px;color:#000;font-size:13px;}

.Border a{color:#070007;text-decoration:underline;}

.Border a:visited{color:#070007;text-decoration:underline;}

.Border a:hover{color:#000;text-decoration:none;}

.BorderBorder{z-index:0;position:relative;margin:5px;}

.BorderTL,.BorderTR,.BorderBL,.BorderBR,.BorderL,.BorderT,.BorderR,.BorderB,.BorderC{position:absolute;z-index:-1;overflow:hidden;}

.BorderTL,.BorderTR,.BorderBL,.BorderBR{width:20px;height:20px;}

.BorderTL{top:0;left:0;background-image:url('images/BorderCorners.png');}

.BorderTR div,.BorderBL div,.BorderBR div{

height: 80px;

width: 40px;

position: absolute;

z-index: -1;

background-image: url('images/BorderCorners.png');

}

.BorderTR div{left:-20px;}

.BorderBL div{top:-20px;}

.BorderBR div{left:-20px;top:-20px;}

.BorderTR{top:0;right:0;}

.BorderBL{bottom:0;left:0;}

.BorderBR{bottom:0;right:0;}

.BorderT,.BorderB{left:20px;right:20px;height:20px;}

.BorderT{top:0;background-image:url('images/BorderHorizontal.png');}

.BorderB{bottom:0;}

.BorderB div{

position: absolute;

z-index: -1;

top: -20px;

height: 100px;

width: 100%;

background-image: url('images/BorderHorizontal.png');

}

.BorderL,.BorderR{top:20px;bottom:20px;width:20px;}

.BorderL{left:0;background-image:url('images/BorderVertical.png');}

.BorderR{right:0;}

.BorderR div{position:absolute;z-index:-1;left:-20px;width:40px;height:100%;background-image:url('images/BorderVertical.png');}

.BorderC{left:20px;top:20px;right:20px;bottom:20px;background-image:url('images/BorderCenter.png');}

.BorderBorder{width:750px;margin:10px auto;}

.Header{position:relative;background-image:url('images/Header.png');background-repeat:no-repeat;padding:0;height:150px;color:#FFF;}

.HeaderTitle{height:150px;width:750px;display:table-cell;text-align:Right;vertical-align:Bottom;color:#FFF;font-size:18px;text-decoration:none;font-style:normal;font-weight:bold;}

.HeaderTitle h1 a,.HeaderTitle h1 a:link,.HeaderTitle h1 a:visited,.HeaderTitle h1 a:hover{text-decoration:none;color:inherit;}

.HeaderTitle h1{margin:0;padding:0 8px;color:#FFF;font-size:26px;text-decoration:none;font-style:normal;font-weight:bold;}

.HeaderTitle h2{margin:0;padding:0 8px;font-size:inherit;font-weight:inherit;}

.Menu{background:transparent url('images/MenuBar.png') no-repeat;padding:5px 5px 0 5px;margin:0;text-align:left;}

.Menu ul{list-style-type:none;padding:0;margin:0;color:#FFF;}

.Menu li{display:inline;padding:0;margin:0;}

.MenuButton,.MenuButtonInput{border:0;margin:0;background:transparent url('images/MenuButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:25px;padding:0 0 0 18px;display:inline-block;color:#FFF;font-size:13px;vertical-align:middle;zoom:1;}

.MenuButton span,.MenuButtonInput span{border:0;margin:0;background:transparent url('images/MenuButton.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:15px;}

.MenuButton span{padding:5px 18px 5px 0;}

.MenuButtonInput span{padding:0 18px 0 0;height:25px;}

.MenuButtonInput input{color:#FFF;font-size:13px;color:inherit;height:25px;padding:0 18px;margin:0 -18px;overflow:visible;cursor:pointer;background:Transparent;border:0;*left:-18px;}

.MenuButtonInput::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:none;}

.MenuButton,.MenuButton:link,.MenuButton:visited,.MenuButton:hover,.MenuButton:active{text-decoration:none!important;outline:none;}

.MenuButton:hover,.MenuButtonInput:hover{background-position:left center;}

.MenuButton:hover span,.MenuButtonInput:hover span{background-position:right center;color:#000;}

.MenuButton:active,.MenuButtonInput:active{background-position:left bottom;}

.MenuButton:active span,.MenuButtonInput:active span{background-position:right bottom;color:#000;}

.ActiveMenuButton,.ActiveMenuButtonInput{border:0;margin:0;background:transparent url('images/ActiveMenuButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:25px;padding:0 0 0 18px;display:inline-block;color:#000;font-size:13px;vertical-align:middle;zoom:1;}

.ActiveMenuButton span,.ActiveMenuButtonInput span{border:0;margin:0;background:transparent url('images/ActiveMenuButton.png') no-repeat right top;display:block;position:relative;color:#000;line-height:15px;}

.ActiveMenuButton span{padding:5px 18px 5px 0;}

.ActiveMenuButtonInput span{padding:0 18px 0 0;height:25px;}

.ActiveMenuButtonInput input{color:#000;font-size:13px;color:inherit;height:25px;padding:0 18px;margin:0 -18px;overflow:visible;cursor:pointer;background:Transparent;border:0;*left:-18px;}

.ActiveMenuButtonInput::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:none;}

.ActiveMenuButton,.ActiveMenuButton:link,.ActiveMenuButton:visited,.ActiveMenuButton:hover,.ActiveMenuButton:active{text-decoration:none!important;outline:none;}

.ActiveMenuButton:hover,.ActiveMenuButtonInput:hover{background-position:left center;}

.ActiveMenuButton:hover span,.ActiveMenuButtonInput:hover span{background-position:right center;color:#000;}

.ActiveMenuButton:active,.ActiveMenuButtonInput:active{background-position:left bottom;}

.ActiveMenuButton:active span,.ActiveMenuButtonInput:active span{background-position:right bottom;color:#000;}

.Columns{overflow:hidden;}

.MainColumn{overflow:hidden;}

img{border:0;}

h2{margin:0;}

blockquote{width:80%;color:#000;border:solid 1px #5F075F;background:#FFF;margin:0 auto;padding:15px;-webkit-border-radius:5px;-moz-border-radius:5px;}

blockquote a,blockquote a:link{color:#070007!important;text-decoration:underline;}

blockquote a:visited{color:#070007!important;text-decoration:underline;}

blockquote a:hover{color:#000!important;text-decoration:none;}

.Article{position:relative;z-index:1;overflow:hidden;padding:10px 10px 10px 10px;color:#000;font-size:13px;}

.Article a{color:#606;text-decoration:underline;}

.Article a:visited{color:#606;text-decoration:underline;}

.Article a:hover{color:#000;text-decoration:none;}

.ArticleBorder{z-index:0;position:relative;margin:5px;}

.Button,.ButtonInput{border:0;margin:0;background:transparent url('images/ButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:29px;padding:0 0 0 21px;display:inline-block;color:#FFF;font-size:13px;vertical-align:middle;zoom:1;}

.Button span,.ButtonInput span{border:0;margin:0;background:transparent url('images/Button.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:13px;}

.Button span{padding:8px 21px 8px 0;}

.ButtonInput span{padding:0 21px 0 0;height:29px;}

.ButtonInput input{color:#FFF;font-size:13px;color:inherit;height:29px;padding:0 21px;margin:0 -21px;overflow:visible;cursor:pointer;background:Transparent;border:0;*left:-21px;}

.ButtonInput::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner{border:none;}

.Button,.Button:link,.Button:visited,.Button:hover,.Button:active{text-decoration:none!important;outline:none;}

.Button:hover,.ButtonInput:hover{background-position:left center;}

.Button:hover span,.ButtonInput:hover span{background-position:right center;color:#000;}

.Button:active,.ButtonInput:active{background-position:left bottom;}

.Button:active span,.ButtonInput:active span{background-position:right bottom;color:#000;}

.Footer{color:#FFF;font-size:13px;text-align:Center;background:url('images/Footer.png') bottom left;overflow:hidden;padding:5px 5px;}

.Footer a{color:#FFF;text-decoration:underline;}

.Footer a:visited{color:#FFF;text-decoration:underline;}

.Footer a:hover{color:#FFF;text-decoration:none;}

.BackLink{text-align:center;display:block;display:block;font-size:11px;padding:0 0 12px;color:#000;}

.BackLink a{color:#000;}

.h3heading{text-align:center;display:block;display:block;padding:0 0 12px;color:#000;}

.clickbutton{

display:block;

text-align:center;

}

Sign In

unable to move quiz.php code onto my css/html template

Recommended Posts

maromaliz

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information