Skip to content

Commit

Permalink
Merge pull request #1 from elooly10/Learnlooly-0.2
Browse files Browse the repository at this point in the history
Made into an API-style system...
Also added Written Questions.
  • Loading branch information
elooly10 authored Jan 26, 2022
2 parents 3a17876 + 363c9dc commit 210603e
Show file tree
Hide file tree
Showing 8 changed files with 251 additions and 139 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
# learnlooly
Learnlooly is a learning game
## documentation
Docs for Learnlooly API are available at this githubs index.php
109 changes: 106 additions & 3 deletions index.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,114 @@
}
*{font-family: sans-serif;}
h1{font-size: 40px;}
purple{
color: #FF33B1;
}
sky{
color: #0099F0;
}
green{
color: #66B180;
}
red{
color: #FF3333;
}
orange{
color: #FF8000;
}
forest{
color: #362
}
yellow{
color: #993;
}
#header{
padding: 10px;
margin: 10px;
}
code{
font-weight: bold;
}
h1{
font-size: 36px
}
h2{
font-size: 30px
}
h3{
font-size: 24px
}
h4{
font-size: 18px
}
p{
text-indent:40px;
}
div.body{
outline-color: #000;
outline-style: solid;
outline-width: 2px;
outline-offset: 5px;
margin: 10px;
}
</style>
<title>Learnlooly! Fun + Learning @ elooly!</title>
<title>Learnlooly Docs</title>
</head>
<body>
<h1> Welcome To Learnlooly </h1>
<a id="playbutton" href="play"> Play ▶︎</a>
<div id='header'>
<h1> Welcome To Learnlooly's API Docs for 0.2</h1>
<a id="playbutton" href="play"> Try It Out ▶︎</a>
</div>
<div class="body">
<h2> <purple>function</purple> <yellow>randomQuestion</yellow>(<sky>options</sky>, <sky>details</sky>) </h2>
<p><sky>randomQuestion</sky> <red>generates</red> & <red>displays</red> <forest>sets</forest></p>
<p><sky>randomQuestion</sky> automaticly <red>shuffles</red> <red>questions</red> in <red>multiple choice</red></p>
<p><sky>randomQuestion</sky> <red>returns</red> <yellow>CorrectAnswer</yellow>(<green>Qid</green>, <orange>EnteredAnswer</orange>)</p>
<p><sky>randomQuestion</sky> <red>also returns</red> <yellow>WrongAnswer</yellow>(<green>Qid</green>, <orange>EnteredAnswer</orange>)</p>
<p><sky>randomQuestion</sky> <red> on fail</red>, <red>returns</red> {<sky>error</sky>:<green>Error Explanation</green>,<sky>specs</sky>:<sky>details</sky>}
<h4> <sky>options</sky>: [<orange>Question</orange>,<orange>Answer</orange>,<orange>Wrong Answer 1</orange>, <orange>Wrong Answer 2</orange>, <orange>Wrong Answer 3</orange>]
<p> <red>Question</red>/<red>answers</red> set. <forest>Wrong answers</forest> do not need specfication in <red>written questions</red></p>
<h3> <sky>details</sky> </h3>
<h4><sky>type</sky>: <green>0<green></h4>
<p> Sets <sky>type</sky> to <red>Multiple Choice</red></p>
<h4><sky>type</sky>: <green>1<green></h4>
<p> Sets <sky>type</sky> to <red>Written</red></p>
<h4> <sky>color</sky>: [
<orange>TopRightBgColor</orange>,
<orange>TopLeftBgColor</orange>,
<orange>BottomLeftBgColor</orange>,
<orange>BottomRightBgColor</orange>,
<orange>WrittenBgColor</orange>,
<orange>TopRightColor</orange>,
<orange>TopLeftColor</orange>,
<orange>BottomLeftColor</orange>,
<orange>BottomRightColor</orange>,
<orange>WrittenColor</orange>]</h4>
<p> Specifys <red> Color </red> and <red> BackgroundColor</red> For <forest>Buttons</forest></p>
</div>
<div class="body">
<h2> <purple>function</purple> <yellow>shuffleArray</yellow>(<sky>array</sky>) </h2>
<p>Can <red> shuffle </red> <forest>anything</forest></p>
<p>There is <red>no reason</red> to <red>use</red> <forest>this</forest> when <red>interacting</red> with <forest>Learnlooly API</forest>, but <forest>it</forest> can be <red>useful</red></p>
<p><red>Returns</red> a <red>shuffled</red> <forest>array</forest></p>
<h3><sky>Array</sky></h3>
<p><sky>Array</sky> can be a <forest>list</forest> of <forest>anything</forest> you want to <red>shuffle</red>.</p>
</div>
<div class="body">
<h2> <purple>function</purple> <yellow>getMCitems</yellow>(<sky>list</sky>) </h2>
<p><red>Returns</red> a <forest>array</forest> with <forest> other answers </forest> for <red>Multiple Choice</red></p>
<p>the <forest>returned array</forest> is arranged <wbr/>[<orange>Question</orange>, <orange>Answer</orange>, <orange>Fake Answer A</orange>, <orange>Fake Answer B</orange>, <orange>Fake Answer C</orange>]
<h3><sky>list</sky></h3>
<p><sky>list</sky> should be a <forest>array</forest> of <forest>Question/Answer sets</forest> you want to <red>Make Into</red> a <red>MC list</red>.</p>
<h3><purple>function</purple> <yellow>MCimportstack</yellow>(<sky>listitem</sky>, <sky>list</sky>) </h3>
<p> Turns an indvidual item into A MC list </p>
</div>
<div class="body">
<h2><purple>function</purple> <yellow>CorrectAnswer</yellow>(<green>Qid</green>, <orange>EnteredAnswer</orange>)</h2>
<h2><purple>function</purple> <yellow>WrongAnswer</yellow>(<green>Qid</green>, <orange>EnteredAnswer</orange>)</h2>
<p><sky>randomQuestion</sky> <red>returns</red> <yellow>CorrectAnswer</yellow>(<green>Qid</green>, <orange>EnteredAnswer</orange>) if the <red> correct answer</red> is given</p>
<p><sky>randomQuestion</sky> <red>also returns</red> <yellow>WrongAnswer</yellow>(<green>Qid</green>, <orange>EnteredAnswer</orange>) if the <red> wrong answer</red> is given </p>
<p>Neither <forest>answer function</forest> is <red>defined</red> and both must be <red>defined</red></p>
</div>
</body>
</html>
73 changes: 73 additions & 0 deletions learnlooly.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@

function MCimportstack(list, listitem){ //Makes answer
var anslist = [listitem[1]];
for(var i = 0; i < 3; i++){
//pick a random answer
var choiceFull = list[Math.floor(Math.random()*list.length)];

var choice = choiceFull[1];

/* console.log('P: '+p);
console.log(`Answer: `+a); */
while(anslist.includes(choice)){ //No Duplicates!

choiceFull = list[Math.floor(Math.random()*list.length)];

choice = choiceFull[1];
//console.log(a);
}
anslist.push(choice);
}
return [listitem[0],anslist[0],anslist[1],anslist[2],anslist[3]];
}
function getMCitems(list) {
var MClist = [];
for(var i = 0; i < list.length; i++){
var listitem = list[i];
MClist[i] = MCimportstack(list, listitem);
}
return MClist;
}

function shuffleArray(array){
for(var i = array.length - 1; i > 0; i--){
var j = Math.floor(Math.random()*(i+1));
var tempArI = array[i];
array[i] = array[j];
array[j] = tempArI;
}
return array;
}
function randomQuestion(options, details){
if(!details){
return {error: "No Specified Details", specs: details};
}
var Qid = Math.floor(Math.random() * options.length);
var Question = options[Qid];
if(details.type == 0){
var Answer = Question[1];
var Question_Only = Question[0]
var txt="<label for='W'><h1 id='q'>"+Question[0]+"</h1></label>";
txt +="<div id='WDIV'><input id='W' name='W' placeholder='Written Input'/>"
txt+="<button id='bw' style='background:"+details.color[4]+"; color:"+details.color[9]+"'onclick=\" if(document.getElementById('W').value=='"+Answer+"'){CorrectAnswer("+Qid+","+Answer+");} else{WrongAnswer("+Qid+",document.getElementById('W').value)}\">Check</button></div>"
}
else if(details.type == 1){
var Answers = [Question[1],Question[2],Question[3],Question[4]];
var QuestionTxt = Question[0];
var CorrectAns = Question[1];
var ShuffledAns = shuffleArray(Answers);
var txt="<h1 id='q'>"+QuestionTxt+"</h1>";
for(var i = 0; i<4; i++){
var AnsButtonClick = "WrongAnswer("+i+","+ShuffledAns[i]+")"
if(ShuffledAns[i] === CorrectAns){
AnsButtonClick = "CorrectAnswer("+i+","+ShuffledAns[i]+")"
}

txt+= "<button id='b"+i+"' style='background:"+details.color[i]+";color:"+details.color[(i+5)]+"'"
txt += "onclick='" + AnsButtonClick+ "'>" + ShuffledAns[i] +"</button>"
}}
else{
return {error: "Not A Valid Type", specs: details}
}
document.getElementById('body').innerHTML = txt;
}
9 changes: 5 additions & 4 deletions play/answer.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
var points = 0;
function CorrectAnswer(){
var CP = ["#EE334E","#396","#60F","#2299E4","#333", /* Txt */ "#FFF","#FFF","#FFF","#FFF","#FFF"];
function CorrectAnswer(qid){
points += 3;
var txt = "<p id='cans'>You Got it correct! You currently have "+ points +" points</p>";
txt +="<button id='cnext'onclick='randomQuestion()'> Next </button>";
txt +="<button id='cnext'onclick='randomQuestion(basearr,{type: 0, color:CP})'> Next </button>";
document.getElementById('body').innerHTML = txt
}
function WrongAnswer(){
function WrongAnswer(qid){
points --;
var txt = "<p id='wans'>You Got it wrong! You currently have "+ points +" points</p>";
txt +="<button id='wnext'onclick='randomQuestion()'> Next </button>";
txt +="<button id='wnext'onclick=' randomQuestion(MClist,{type: 1, color:CP});'> Next </button>";
document.getElementById('body').innerHTML = txt
}
26 changes: 0 additions & 26 deletions play/dispMC.js

This file was deleted.

7 changes: 0 additions & 7 deletions play/handler.php

This file was deleted.

81 changes: 65 additions & 16 deletions play/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<head>
<meta charset="utf-8">
<title>Play & Learn with Learnlooly @ elooly.com</title>
<script src="mc.js"></script>
<script src="dispMC.js"></script>
<script src="/learnlooly/learnlooly.js"></script>
<script src="answer.js"></script>
<style>
*{font-family: Arial, sans-serif;}
Expand All @@ -18,9 +17,9 @@
margin: 0.25%;
text-align: center;
width: 49.5%;
height: 40%;
height: 30%;
border: none;
font-size: 48px;
font-size: 28px;
}
#cnext{
width:100%;
Expand All @@ -38,20 +37,15 @@
text-align: center;
height: 19%;
width: 100%;
font-size: 96px;
font-size: 90px;
margin-bottom: auto;
}
#b0{
background: #E4334E;
#W{
text-align: center;
}
#b1{
background: #396;
}
#b2{
background: #60F;
}
#b3{
background: #2299E4;
#WDIV{
margin: 0 auto;
}
</style>
</head>
Expand All @@ -60,5 +54,60 @@
Question Loading...
</div>
</body>
<script> randomQuestion(); // Toda! </script>
<script>
var basearr = [
['Rhode Island', 'Providence'],
['Alaska', 'Juneau'],
['Arizona', 'Phoenix'],
['Arkansas', 'Little Rock'],
['California', 'Sacramento'],
['Neveda', 'Carson City'],
['Oregon', 'Salem'],
['Washington', 'Olympia'],
['Idaho', 'Boise'],
['Utah', 'Salt Lake City'],
['New Mexico', 'Santa Fe'],
['Colorado', 'Denver'],
['Wyoming', 'Cheyenne'],
['Montana', 'Helena'],
['North Dakota', 'Bismark'],
['South Dakota', 'Pierre'],
['Nebraska', 'Lincoln'],
['Kansas', 'Topeka'],
['Oklahoma', 'Oklahoma City'],
['Texas', 'Austin'],
['Louisiana', 'Baton Rouge'],
['Hawaii', 'Honolulu'],
['Missouri', 'Jefferson City'],
['Iowa', 'Des Moines'],
['Minnesota', 'St. Paul'],
['Michigan', 'Lansing'],
['Mississippi', 'Jackson'],
['Alabama', 'Montgomery'],
['Georgia', 'Atlanta'],
['Florida', 'Tallahassee'],
['Tennesse', 'Nashville'],
['Kentucky', 'Frankfort'],
['Illinois', 'Springfield'],
['Indiana', 'Indianapollis'],
['Wisconsin', 'Madison'],
['Ohio', 'Colombus'],
['South Carolina', 'Colombia'],
['North Carolina', 'Raleigh'],
['Virginia', 'Richmond'],
['West Virginia', 'Charleston'],
['Pennsylvania', 'Harrisburg'],
['New York', 'Albany'],
['New Jersey ', 'Trenton'],
['Maryland', 'Annapolis'],
['Delaware', 'Dover'],
['Massachusetts', 'Boston'],
['Maine', 'Augusta'],
['Vermont', 'Montpelier'],
['New Hampshire', 'Concord'],
['Connecticut', 'Hartford']
]
var MClist = getMCitems(basearr)
randomQuestion(MClist,{type: 0, color: CP}); // Toda!
</script>
</html>
Loading

0 comments on commit 210603e

Please sign in to comment.