Jump to content

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

maromaliz

By maromaliz
in PHP Coding Help

 Share

Recommended Posts

maromaliz Newbie

maromaliz

Posted
Posted

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Quiz Tut</title>

<script>

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 action="userAnswers.php" method="post">

<input type="hidden" name="complete" value="true">

<input type="text" name="username">

<input type="submit" value="Finish">

</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>

<input type="hidden" id="qid" value="'.$id.'" name="qid"><br /><br />

';

 

}

$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>

<meta charset="utf-8">

<title>Quiz Page</title>

<script type="text/javascript">

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>

<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="BorderBorder"><div class="BorderBL"><div></div></div><div class="BorderBR"><div></div></div><div class="BorderTL"></div><div class="BorderTR"><div></div></div><div class="BorderT"></div><div class="BorderR"><div></div></div><div class="BorderB"><div></div></div><div class="BorderL"></div><div class="BorderC"></div><div class="Border">

<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>

</div>

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

</p>

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

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

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

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

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

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

<p class="BackLink"> </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;

}

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.