PDA

View Full Version : Cool code bits


Dinocanid
02-01-2017, 04:22 PM
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 (http://www.mysidiaadoptables.com/forum/showthread.php?t=4964) or Word Scramble (http://www.mysidiaadoptables.com/forum/showthread.php?t=4996). 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:

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

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(la bel, br);
document.getElementById('content').insertBefore(ra dioButton, 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)

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,hea der,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

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
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 (http://snipplr.com/view/67851/javascript-quiz-template/)


(More to come. I'm working on getting an avatar customization thing working next, I just need to get the layers to appear correctly)

Abronsyth
02-01-2017, 08:09 PM
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.

Ittermat
02-05-2017, 11:44 PM
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..

Abronsyth
02-06-2017, 10:37 AM
I'm having the same issue, Ittermat. Though I'm holding off on testing it more while I look into the sendscore function.

Dinocanid
02-06-2017, 07:55 PM
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.

LUC1G07CH1
07-23-2017, 09:29 AM
Now i must figure out how to make the questions :eye:

Dinocanid
07-23-2017, 10:05 AM
The questions can be changed like this:
"question" : "Question goes here",
"choices" : [
"answer"


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

},

So an example would be:
"question" : "What's my favorite ice cream?",
"choices" : [
"vanilla",
"strawberry",
"chocolate",
"banana"
],
"correct" : "vanilla",
"explanation" : "I like vanilla because it tasted good!",

}

LUC1G07CH1
07-23-2017, 10:38 AM
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.

LUC1G07CH1
07-23-2017, 10:56 AM
I'm too lazy to explain the issue so i quoted someone:

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

What to do?

Dinocanid
07-23-2017, 03:20 PM
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:
<!doctype html>
<html lang='en'>
<head>
<link rel='stylesheet' href='https://us.hideproxy.me/go.php?u=qLQkHcQKhwaOwQom43usO29P4WWZAsmMDEWDOswYI kgUYwvjjoPyeBVTa%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=qLQkHcQKhwaOwQom43usO29P4WWZAsmMDEWDOswYI kgUYwvjjoPyeBVTa%2BVaL%2FKARYUrJmRI%2B9DT1VD1v4o%3 D&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.

Abronsyth
07-24-2017, 05:14 AM
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?

Dinocanid
07-24-2017, 06:41 AM
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.

LUC1G07CH1
07-24-2017, 11:44 AM
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?

Dinocanid
07-24-2017, 12:38 PM
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)
{
"question" : "Q1",
"choices" : [
"answer"

],
"correct" : "answer",
"explanation" : "explain",

},
{
"question" : "Q1",
"choices" : [
"answer"

],
"correct" : "answer",
"explanation" : "explain",

},

If you don't the game will break/produce errors.