Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Tutorials and Tips
Reload this Page Cool code bits
vBCommerceProjects FAQ Community Calendar Today's Posts Search

Notices

Reply
Page 1 of 2 1 2
 
Thread Tools Display Modes
  #1  
Old 02-01-2017, 05:22 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 79,243
Dinocanid is on a distinguished road
Default 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.

  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 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)
__________________
Last edited by Dinocanid; 02-06-2017 at 08:54 PM.
Reply With Quote
  #2  
Old 02-01-2017, 09:09 PM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
  
Join Date: Aug 2011
Location: NY
Posts: 1,011
Gender: Male
Credits: 133,560
Abronsyth is on a distinguished road
Default
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.
__________________
My Mods Site (1.3.4, 2020 Mods)
Last edited by Abronsyth; 02-02-2017 at 02:06 PM.
Reply With Quote
  #3  
Old 02-06-2017, 12:44 AM
Ittermat's Avatar
Ittermat Ittermat is offline
The awesomesauce
  
Join Date: Feb 2016
Location: in front of my laptop
Posts: 272
Gender: Female
Credits: 38,596
Ittermat is on a distinguished road
Default
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..
Reply With Quote
  #4  
Old 02-06-2017, 11:37 AM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
  
Join Date: Aug 2011
Location: NY
Posts: 1,011
Gender: Male
Credits: 133,560
Abronsyth is on a distinguished road
Default
I'm having the same issue, Ittermat. Though I'm holding off on testing it more while I look into the sendscore function.
__________________
My Mods Site (1.3.4, 2020 Mods)
Reply With Quote
  #5  
Old 02-06-2017, 08:55 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 79,243
Dinocanid is on a distinguished road
Default
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.
__________________
Reply With Quote
  #6  
Old 07-23-2017, 10:29 AM
LUC1G07CH1's Avatar
LUC1G07CH1 LUC1G07CH1 is offline
Member
  
Join Date: Mar 2016
Location: Too distant for telling, but it's HUEBR
Posts: 158
Gender: Unknown/Other
Credits: 31,426
LUC1G07CH1 is on a distinguished road
Send a message via AIM to LUC1G07CH1 Send a message via Yahoo to LUC1G07CH1
Default
Now i must figure out how to make the questions
Reply With Quote
  #7  
Old 07-23-2017, 11:05 AM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 79,243
Dinocanid is on a distinguished road
Default
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!",
 
			}
__________________
Reply With Quote
  #8  
Old 07-23-2017, 11:38 AM
LUC1G07CH1's Avatar
LUC1G07CH1 LUC1G07CH1 is offline
Member
  
Join Date: Mar 2016
Location: Too distant for telling, but it's HUEBR
Posts: 158
Gender: Unknown/Other
Credits: 31,426
LUC1G07CH1 is on a distinguished road
Send a message via AIM to LUC1G07CH1 Send a message via Yahoo to LUC1G07CH1
Default
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.
Reply With Quote
  #9  
Old 07-23-2017, 11:56 AM
LUC1G07CH1's Avatar
LUC1G07CH1 LUC1G07CH1 is offline
Member
  
Join Date: Mar 2016
Location: Too distant for telling, but it's HUEBR
Posts: 158
Gender: Unknown/Other
Credits: 31,426
LUC1G07CH1 is on a distinguished road
Send a message via AIM to LUC1G07CH1 Send a message via Yahoo to LUC1G07CH1
Default
I'm too lazy to explain the issue so i quoted someone:

Quote:
Originally Posted by Ittermat View Post
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?
Reply With Quote
  #10  
Old 07-23-2017, 04:20 PM
Dinocanid's Avatar
Dinocanid Dinocanid is offline
Member
  
Join Date: Aug 2016
Location: Maryland, USA
Posts: 516
Gender: Unknown/Other
Credits: 79,243
Dinocanid is on a distinguished road
Default
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 Code:
<!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 by Dinocanid; 07-23-2017 at 05:03 PM.
Reply With Quote
Reply
Page 1 of 2 1 2

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 10:07 AM.

Currently Active Users: 678 (0 members and 678 guests)
Threads: 4,081, Posts: 32,032, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?
Mysidia Adoptables - Archive - Privacy Statement - Terms of Service - Top

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636