Cool code bits

Forum
Last Post
Threads / Messages
Dinocanid

Dinocanid

Member
Member
Joined
Aug 30, 2016
Messages
520
Points
18
Age
23
Location
Maryland, USA
Mysidian Dollar
43,334
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.

  Spoiler: Trivia Game 

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: 
<!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: 
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: 
<?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: 
<?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)
 
Last edited:
Awesome! Thank you for sharing, this is great!

I think for avatar customization you will need to employ the use of a GD Library, which will be needed to save dynamic images, which are what you'd use to create an avatar customization system.
 
Last edited:
I'm having a small issue with this- I copied the code and did what you said- but the questions arent appearing in the trivia box... it simply says "question here"

Instead of any questions or answers..
 
I'm having the same issue, Ittermat. Though I'm holding off on testing it more while I look into the sendscore function.
 
I went through it myself and ran into the issue. Something was up with the javascript code, but I don't know what since I couldn't spot what was different from the one on my site. I replaced it so it should work fine now.
 
The questions can be changed like this:
Code: 
"question"		: 	"Question goes here",
				"choices"		: 	[
										"answer"


									],
				"correct"		: 	"correct answer",
				"explanation"	: 	"explain why that's the answer",
 
			},

So an example would be:
Code: 
"question"		: 	"What's my favorite ice cream?",
				"choices"		: 	[
										"vanilla",
										"strawberry",
										"chocolate",
										"banana"
									],
				"correct"		: 	"vanilla",
				"explanation"	: 	"I like vanilla because it tasted good!",
 
			}
 
Oh
I'll try it out.
Then i'll make an arcade machine to this because on every game my site haves, an arcade machine will be added with the game link.
 
I'm too lazy to explain the issue so i quoted someone:

Ittermat said:
I'm having a small issue with this- I copied the code and did what you said- but the questions arent appearing in the trivia box... it simply says "question here"

Instead of any questions or answers..
Click to expand...

What to do?
 
That's because the php file (the one located in public_html/games/trivia), has the wrong paths in it if you named the files anything else:
PHP: 
<!doctype html> 
<html lang='en'> 
<head> 
<link rel='stylesheet' href='https://us.hideproxy.me/go.php?u=qLQkHcQKhwaOwQom43usO29P4WWZAsmMDEWDOswYIkgUYwvjjoPyeBVTa%2BVaL%2FKARYUrJmRI%2B9DT1VD1toqe&b=5' 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='https://us.hideproxy.me/go.php?u=qLQkHcQKhwaOwQom43usO29P4WWZAsmMDEWDOswYIkgUYwvjjoPyeBVTa%2BVaL%2FKARYUrJmRI%2B9DT1VD1v4o%3D&b=5'></script> 
</body> 
</html>
This is what mine looks like, but that's because my files are named something different. If this doesn't work, what's your folder structure? (how the games folder is set up, what the file names are, etc.)

EDIT: Also, good news! I've actually wrapped my head around GD libraries and I'm figuring out how to get avatar customization to work.
 
Last edited:
Yooo, nice! I haven't had time to look into it much but I know Mysidia already employs GD Library for the alt. code.

Do you think you'll share it once you've figured it out?
 
Yeah, since the script could use some examples outside of the siggy.
I got all the way up to generating different images as layers and merging them into one; then sending the final render to another page. (Since I've found that you can't render the same page with any text and still call the image) I'm getting some help on TGL now, since I was having problems with swapping layers from dropdowns.
EDIT: Also don't mind those long links in my last post. I was using a proxy to connect and it messed the link up.
 
Last edited:
Also...on the .js file, it gives "X" when i added the 3rd and the 4th question. Am i doing something wrong?
Edit: figured what i am doing wrong.

Edit: Fixed the "question not showing" thing. It's because the .js file had alot of errors and then i fixed all of them by just putting a "?" on the 3rd question.
Huh?
 
Last edited:
That's strange. I just copy-pasted the .js file and I didn't have any errors at all. Make sure that when you add new questions, the closing bracket always has a comma next to it. (Highlighted in red)
Code: 
  {
				"question"		: 	"Q1",
				"choices"		: 	[
										"answer"

									],
				"correct"		: 	"answer",
				"explanation"	: 	"explain",
 
			}[COLOR="Red"],[/COLOR]
  {
				"question"		: 	"Q1",
				"choices"		: 	[
										"answer"

									],
				"correct"		: 	"answer",
				"explanation"	: 	"explain",
 
			}[COLOR="Red"],[/COLOR]
If you don't the game will break/produce errors.
 
You must log in or register to reply here.
Similar threads
Thread starter Title Forum Replies Date
Kyttias Cool News Ticker Programming and Game Development 1
L Cool little pager thingy? Questions and Supports 4
llazybonezz Getting a 1.3.5 version explore code to work for 1.3.6? Questions and Supports 5
SilverDragonTears Not understanding this code Questions and Supports 0
Milly Money Looking for someone to code a Mweor style Petsite Staff Central 0

Similar threads

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,277
Messages
33,119
Members
1,602
Latest member
BerrieMilk
BETA

Latest Threads

Latest Posts

Share

Top