Mysidia Adoptables Support Forum

Mysidia Adoptables Support Forum (http://www.mysidiaadoptables.com/forum/index.php)
-   Tutorials and Tips (http://www.mysidiaadoptables.com/forum/forumdisplay.php?f=27)
-   -   Cool code bits (http://www.mysidiaadoptables.com/forum/showthread.php?t=5358)

Dinocanid 02-01-2017 04: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.

  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 RueUC Berkeley Graduate School of Journalism -->
</
head>
<
body>
    <
div id="frame">
        <
h1>Site Quiz</h1>
        <
div id="score"><p>score0 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:1font:normal 0.9em/1em "Helvetica Neue"HelveticaArialsans-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"HelveticaArialsans-serif;margin:0 40px 10px;

        
h1{
      
font:normal bold 2em/1.8em "Helvetica Neue"HelveticaArialsans-serif;text-align:left;background:#ccc;padding:0 15px;width:auto
}
        
h2{
      
font:italic bold 1.3em/1.2em "Helvetica Neue"HelveticaArialsans-serif;padding:5px 15px 15px;

        
input[type=radio]{
      
margin:0 10px 5px -22px;
label{
  
margin:0 0 5px;
}
        
#score p{
      
font-size:0.95emfont-style:italiccolor:#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:70pxmargin:10px
}
        
#response h3{
      
font:normal bold 1.2em/1.5em "Helvetica Neue"HelveticaArialsans-serifmargin: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)

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:
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!",
 
                        }


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:

Quote:

Originally Posted by Ittermat (Post 35810)
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:
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 RueUC Berkeley Graduate School of Journalism --> 
</
head
<
body
    <
div id="frame"
        <
h1>Site Quiz</h1
        <
div id="score"><p>score0 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.


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

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.