| Dinocanid |
02-01-2017 05:22 PM |
Cool code bits
First and foremost, I don't own these codes! They were all found through google searches. All I did was make it workable with the mysidia script.
This is easier to add if you've added one of the other game scripts already, be it Higher or Lower or Word Scramble. The setup of the folders is the same/similar, so I highly advise it.
(Sending the final score isn't included, but it can be done if you know how to do so)
-Instructions-
Go to your games folder (located in public_html or wherever your root folder is) and add a new folder called trivia. Inside, add these files:
PHP Code:
<!doctype html>
<html lang='en'>
<head>
<link rel='stylesheet' href='../../games/trivia/trivia.css' type='text/css'>
<meta charset="utf-8">
<title>Quiz</title>
<!-- Quiz Written By Jeremy Rue, UC Berkeley Graduate School of Journalism -->
</head>
<body>
<div id="frame">
<h1>Site Quiz</h1>
<div id="score"><p>score: 0 right answers out of 0 possible</p></div>
<h2 id="question">Question here</h2>
<div id="content">
</div>
<button id="check" onclick="checkAnswer()">Submit Answer</button>
<div id="response">
<div id="explanation"></div>
</div>
</div>
<script src='../../games/trivia/trivia.js'></script>
</body>
</html>
(^ trivia.php)
Code:
var quiz = [
{
"question" : "Q1",
"choices" : [
"answer"
],
"correct" : "answer",
"explanation" : "explain",
},
{
"question" : "Q2",
"choices" : [
"a1",
"a2",
"a3",
"a4"
],
"correct" : "answer",
"explanation" : "explain",
},
];
var currentQuestion = 0;
var score = 0;
var askingQuestion = true;
function loadQuestion(){
//set temporary variable for creating radio buttons
var radioButton;
//clear out radio buttons from previous question
document.getElementById('content').innerHTML = "";
//loop through choices, and create radio buttons
for(var i=0; i < quiz[currentQuestion]["choices"].length; i++){
radioButton = document.createElement('input');
radioButton.type = 'radio';
radioButton.name = 'quiz';
radioButton.id = 'choice'+ (i+1);
radioButton.value = quiz[currentQuestion]["choices"][i];
//create label tag, which hold the actual text of the choices
var label = document.createElement('label');
label.setAttribute('for','choice'+ (i+1));
label.innerHTML = quiz[currentQuestion]["choices"][i];
//create a <br> tag to separate options
var br = document.createElement('br');
//attach them to content. Attach br tag, then label, then radio button
document.getElementById('content').appendChild(br);
document.getElementById('content').insertBefore(label, br);
document.getElementById('content').insertBefore(radioButton, label);
}
//load the question
document.getElementById('question').innerHTML = quiz[currentQuestion]["question"];
//setup score for first time
if(currentQuestion == 0){
document.getElementById('score').innerHTML = '<p>score: 0 right answers out of ' + quiz.length +' possible</p>';
}
}
function checkAnswer(){
//are we asking a question, or proceeding to next question?
if(askingQuestion){
//change button text to next question, so next time they click it, it goes to next question
document.getElementById('check').innerHTML = 'Next Question';
askingQuestion = false;
//determine which radio button they clicked
var userpick;
var correctIndex;
var radios = document.getElementsByName('quiz');
for(var i=0; i < radios.length; i++){
if(radios[i].checked){ //if this radio button is checked
userpick = radios[i].value;
}
//get index of correct answer
if(radios[i].value == quiz[currentQuestion]["correct"]){
correctIndex = i;
}
}
//set the color if they got it right, or wrong
if(userpick == quiz[currentQuestion]["correct"]){
score++;
document.getElementsByTagName('label')[correctIndex].style.color = "green";
document.getElementsByTagName('label')[correctIndex].style.fontWeight = "bold";
document.getElementById('explanation').innerHTML = "<h3>Correct!</h3>";
} else {
document.getElementsByTagName('label')[correctIndex].style.color = "red";
document.getElementsByTagName('label')[correctIndex].style.fontWeight = "bold";
document.getElementById('explanation').innerHTML = "<h3>Incorrect</h3>";
}
document.getElementById('explanation').innerHTML += '<p>' + quiz[currentQuestion]["explanation"] + '</p>';
document.getElementById('score').innerHTML = '<p>score: '+ score +' right answers out of ' + quiz.length +' possible</p>';
} else { //reset form and move to next question
//setting up so user can ask a question
askingQuestion = true;
//change button text back to 'submit answer'
document.getElementById('check').innerHTML = 'Submit Answer';
document.getElementById('explanation').innerHTML = "";
//if we're not on last question, increase question number
if(currentQuestion < quiz.length - 1){
currentQuestion++;
loadQuestion();
} else {
showFinalResults();
}
}
}
function showFinalResults(){
document.getElementById('content').innerHTML = '<h2>You Completed The Quiz</h2>';
document.getElementById('content').innerHTML += '<p>Below are your results:</p>';
document.getElementById('content').innerHTML += '<h2>' + score + ' out of ' + quiz.length + ' questions, ' + Math.round(score/quiz.length * 100) + '%</h2>';
//delete the button
var button = document.getElementById('check');
button.parentNode.removeChild(button); //js requires you to delete elements from the parent
//remove question
document.getElementById('question').innerHTML = "";
}
window.onload = loadQuestion;
(^ trivia.js)
PHP Code:
html,body,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{
border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ol,ul{
list-style:none;
}
#frame{
max-width:620px;width:100%;border:1px solid #ccc;background:#eee;padding:10px;
}
#content{
font:normal normal 1em/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif;margin:0 40px 10px;
}
h1{
font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;background:#ccc;padding:0 15px;width:auto
}
h2{
font:italic bold 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:5px 15px 15px;
}
input[type=radio]{
margin:0 10px 5px -22px;
} label{
margin:0 0 5px;
}
#score p{
font-size:0.95em; font-style:italic; color:#666; float:right;margin:5px 5px 0 0;
}
#score:after{
content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;
}
#response{
min-height:70px; margin:10px;
}
#response h3{
font:normal bold 1.2em/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; margin:5px 0;
}
(^ trivia.css)
Once you've done that, go back to your root folder and create a folder called trivia.php. Paste this inside:
PHP Code:
<?php
class TriviaController extends AppController{
public function __construct(){
parent::__construct();
}
public function index(){
}
}
?>
Now go to your view folder, create triviaview.php and add this:
PHP Code:
<?php
class TriviaView extends View{
public function index(){
$mysidia = Registry::get("mysidia");
$document = $this->document;
$document->setTitle('Trivia Title');
$document->add(new Comment('<p>Try to guess the right answer!</p>
<iframe id="game" style="width: 100%; min-height: 500px;" src="../../games/trivia/trivia.php?username='.$mysidia->user->username.'" frameborder="0" scrolling="yes"></iframe>'));
}
}
?>
And you're done! It's customizable too, just edit the css as you see fit. To change the questions and answers, only edit the javascript file! Don't edit the php files, it won't do anything.
Original Script: Link
(More to come. I'm working on getting an avatar customization thing working next, I just need to get the layers to appear correctly) |
Spoiler: Trivia Game