Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Quizlers
ID	5071533409484800
Created	3 months ago, 1726536529623
Updated	3 months ago, 1726870168741
Code	/** * * Whipped this up in just a few hours (I know, I know, it could have been faster but I wanted to write some clean code for once.) * * No cheating or you shall be prosecuted! Actually I highly encourage this, it would be a good test of your programming skillz :D Line 680 may be of interest to those of you who want to try :) If anybody manages to break through my firewall or has tips on how to make it stronger then please tell me! * * The instructions are in the game so just click play! * * Btw don't bother me about the name, it just came off the top of my head as I was making the homescreen so I just stuck with it XD * * Also if anybody out there has a play on words (no pun intended) idea I'll add it to the game with credit :) * */ // VARS // [ var colors,fonts,game,mouse,questions,a,obfuscate,rev,reverseSimilar,similar,resetCtx,valid,rotatePoint,isInEllipse,isBetween,isInRect,button,transitionBasic,transitionRight,transitionWrong,Mouse,Question,scenes,reloads = reloads \|\| 1; // ] //+-= // SETUP // [ //global settings var colors = { background: color(50), primary: color(220), secondary: color(143, 204, 207), compliment: color(150), side: color(150) }; var fonts = [createFont("impact"), createFont("sans")]; //predefine objects var game, mouse, questions,a; // ] // FUNCTIONS // [ //reverse a string function rev(str){ var revStr = ""; for (var i = 0; i < str.length; i++) { revStr = str.charAt(i) + revStr; } return revStr; } //returns a value 0-1 depending on how similar two strings are (to be more forgiving with answers) function reverseSimilar(s1, s2){ var score = 0, s1 = rev(s1), s2 = rev(s2), m = max(s1.length, s2.length); if(s1 === s2){ return 1; } for(var i = 0; i < m; i++){ if(s2[i] === s1[i]){ score += 1; }else{ for(var j = i-(m/2); j < i+(m/2); j++){ var a = pow(2, -(abs(i-j)+1)); if(j < min(s1.length, s2.length) && j >= 0){ if(s1[j] === s2[i]){ score += a; } if(s1[i] === s2[j]){ score += a; } } } } } return score/m; } function similar(s1, s2){ var score = 0, s1 = s1.toLowerCase(), s2 = s2.toLowerCase(), m = max(s1.length, s2.length); if(s1 === s2){ return 1; } for(var i = 0; i < m; i++){ if(s2[i] === s1[i]){ score += 1; }else{ for(var j = i-(m/2); j < i+(m/2); j++){ var a = pow(2, -(abs(i-j)+1)); if(j < min(s1.length, s2.length) && j >= 0){ if(s1[j] === s2[i]){ score += a; } if(s1[i] === s2[j]){ score += a; } } } } } return max((score/m),reverseSimilar(s1, s2)); } //reset to a default context function resetCtx(){ textAlign(CENTER, CENTER); rectMode(CENTER); imageMode(CENTER); strokeJoin(ROUND); colorMode(RGB); strokeWeight(1); stroke(0); fill(-1); textFont(fonts[0], 20); } //return the key if it is a valid typing letter function valid(key){ return key.match(/[\w!@#$%^&()_+-={}[\]\|\\:";'>?.\/,<`~ ]/i)\|\|false; } //bob function rotatePoint(x, y, theta, sine) { var cosine = theta; if (sine === undefined) { cosine = cos(theta); sine = sin(theta); } return { x: cosinex + siney, y: -sinex + cosiney }; } function isInEllipse(x, y, ex, ey, w, h, theta, sine) { x -= ex; y -= ey; if (theta \| sine) { var rp = rotatePoint(x, y, theta, sine); x = rp.x; y = rp.y; } var termX = 2 x / w; /* sqrt of first term / var termY = 2 y / h; /* sqrt of second term / return ((termX termX) + (termY * termY)) <= 1; } function isBetween(c, a, b) { return (a - c) * (b - c) <= 0; } function isInRect(x, y, rx, ry, w, h, theta) { if (theta) { var p = rotatePoint(x - rx, y - ry, theta); x = p.x + rx; y = p.y + ry; } rx -= w/2; ry -= h/2; return isBetween(x, rx, rx + w) && isBetween(y, ry, ry + h); } //a basic button function button(params){ /VARS/ //position & shape var x = params.x \|\| 0; var y = params.y \|\| 0; var w = params.w \|\| 50; var h = params.h \|\| 50; var shape = params.shape \|\| "rect"; //rect, ellipse or quad //image var image = params.image; //rotation var r = params.r \|\| 0; var hoverR = params.hoverR; var clickR = params.clickR; //color var Color = params.color \|\| color(0); var hoverColor = params.hoverColor; var clickColor = params.clickColor; //border var Stroke = params.stroke \|\| color(0); var hoverStroke = params.hoverStroke; var clickStroke = params.clickStroke; var StrokeWeight = params.strokeWeight \|\| 0; var borderRadius = params.borderRadius \|\| 0; //text textSize(12); var Text = params.text \|\| ""; var textColor = params.textColor \|\| color(0); var hoverTextColor = params.hoverTextColor; var clickTextColor = params.clickTextColor; var TextSize = params.textSize \|\| ((shape === "rect")?(min(h, w/textWidth(Text)9)):(min(h0.8, w/textWidth(Text)9))); //events var onClick = params.onClick \|\| params.click \|\| function(){}; var mouseOver = params.mouseOver \|\| params.over \|\| function(){}; var mouseOut = params.mouseOut \|\| params.out \|\| function(){}; //booleans var mouseIsOver = false; var mouseWasOver = false; var mouseIsClicked = false; /LOGIC/ if(shape === "ellipse" && isInEllipse(mouseX, mouseY, x, y, w, h, r)){ mouseIsOver = true; } if(shape === "rect" && isInRect(mouseX, mouseY, x, y, w, h, r)){ mouseIsOver = true; } if(shape === "ellipse" && isInEllipse(pmouseX, pmouseY, x, y, w, h, r)){ mouseWasOver = true; } if(shape === "rect" && isInRect(pmouseX, pmouseY, x, y, w, h, r)){ mouseWasOver = true; } if(mouseIsOver && (mouse.button[39] \|\| mouse.button[37])){ mouseIsClicked = true; }else{ mouseIsClicked = false; } /DISPLAY/ pushMatrix(); translate(x, y); if(mouseIsClicked){ rotate(clickR\|\|r); }else if(mouseIsOver){ rotate(hoverR\|\|r); }else{ rotate(r); } textAlign(CENTER, CENTER); textSize(TextSize); if(image){ imageMode(CENTER); image(image, 0, 0, w, h); } if(mouseIsClicked){ fill(clickColor\|\|Color); stroke(clickStroke\|\|Stroke); }else if(mouseIsOver){ fill(hoverColor\|\|Color); stroke(hoverStroke\|\|Stroke); }else{ fill(Color); stroke(Stroke); } if(StrokeWeight){ strokeWeight(StrokeWeight); }else{ noStroke(); } if(shape === "rect"){ rectMode(CENTER); rect(0, 0, w, h, borderRadius); } if(shape === "ellipse"){ ellipse(0, 0, w, h); } if(mouseIsClicked){ fill(clickTextColor\|\|textColor); }else if(mouseIsOver){ fill(hoverTextColor\|\|textColor); }else{ fill(textColor); } text(Text,0, 0); popMatrix(); /EVENTS/ if(mouseIsOver && mouse.button[0]){ onClick(); return true; } if(mouseWasOver && !mouseIsOver){ mouseOut(); } if(!mouseWasOver && mouseIsOver){ mouseOver(); } } //transitions function transitionBasic(start, time){ noStroke(); rectMode(CORNER); var amount = 10, translation = map(time, start, start/2, 600, 0); for(var i = 0; i < amount; i++){ fill(lerpColor(colors.secondary, colors.background, i/10)); rect(i(600/amount)+translation, 0, 600/amount, 600); } } function transitionRight(start, time){ //back var translation = map(time, start, start/2, 600, 0); transitionBasic(start, time); //check var amount = 5; noFill(); for(var i = amount; i >= 1; i--){ stroke(lerpColor( color(179, 250, 158), color(100, 189, 70), i/amount ), 100); strokeWeight(i10); beginShape(); vertex(150+translation, 400); vertex(275+translation, 500); vertex(450+translation, 200); endShape(); } } function transitionWrong(start, time){ //back var translation = map(time, start, start/2, 600, 0); transitionBasic(start, time); //cross var amount = 5; noFill(); for(var i = amount; i >= 1; i--){ stroke(lerpColor( color(245, 144, 144), color(222, 69, 69), i/amount ), 100); strokeWeight(i10); beginShape(); vertex(400+translation, 400); vertex(300+translation, 300); vertex(200+translation, 200); vertex(300+translation, 300); vertex(200+translation, 400); vertex(300+translation, 300); vertex(400+translation, 200); endShape(); } } //bet you thought this one would be called transitionLeft hehe // ] // PROTOTYPES // [ //jshint ignore: start var Mouse = function(){ Mouse = function(){ //0 === released //1 === not pressed //3 === middle //37 === left //39 === right this.x = mouseX; this.y = mouseY; this.button = { 0: false, 1: true, 3: false, 37: false, 39: false, }; }; Mouse.prototype.display = function(){ cursor("default"); }; Mouse.prototype.update = function(){ this.x = mouseX; this.y = mouseY; if(this.button[0]){ this.button[0] = false; this.button[1] = true; } }; Mouse.prototype.deactiveate = function(){ this.button[0] = false; this.button[1] = true; this.button[3] = false; this.button[37] = false; this.button[39] = false; }; return Mouse; }(); var Question = function(){ Question = function(art, a){ this.art = art; this.a = a; }; Question.prototype.display = function(){ background(colors.background); //art resetCtx(); pushMatrix(); translate(100, 50); strokeWeight(5); stroke(colors.secondary); fill(colors.primary); rect(200, 200, 400, 400); this.art(); popMatrix(); resetCtx(); //typing line strokeWeight(3); stroke(colors.secondary); line(100, 550, 500, 550); fill(colors.side); textFont(fonts[1], 30); textAlign(LEFT, CENTER); Question.inputWidth = textWidth(Question.input); text(Question.input+(frameCount%50<(50/2)?"\|":""), 300-Question.inputWidth/2, 535); }; Question.prototype.logic = function(){ if(button({ x: 300, y: 577, w: 100, h: 30, text: "GO", textSize: 18, color: colors.primary, textColor: colors.secondary, hoverColor: lerpColor(colors.primary, colors.background, 0.2), clickColor: lerpColor(colors.primary, colors.background, 0.4), hoverTextColor: lerpColor(colors.secondary, colors.background, 0.2), clickTextColor: lerpColor(colors.secondary, colors.background, 0.4), borderRadius: 5, }) \|\| Question.enter){ obfuscate(this.a); } }; Question.prototype.update = function(){ this.display(); this.logic(); }; Question.input = ""; Question.enter = false; Question.inputWidth = 0; Question.handleKey = function(key, keyCode){ //delete if(keyCode === 8){ this.input = this.input.substr(0, this.input.length-1); } //enter if(keyCode === 10){ this.enter = true; } //key if(valid(key) && this.inputWidth < 400){ this.input += key; } }; Question.reset = function(){ this.input = ""; this.inputWidth = 0; this.enter = false; }; return Question; }(); // ] // GAME // [ var game = { //current scene scene: "home", //current question question: 0, //transition time and execution transition: 0, transitionScene: "", transitionNextScene: "", transitionTime: 150, //must be even beginTransition: function(onTransition, scene, transitionArt){ this.transition = this.transitionTime; this.transitionScene = this.scene; this.transitionArt = transitionArt; this.transitionNextScene = scene; this.scene = "transition"; this.onTransition = onTransition; }, onTransition: function(){ }, transitionArt: function(){ }, //total correct answers to date correct: 0 }; // ] // SCENES // [ var scenes = { home: function(){ resetCtx(); background(colors.background); textSize(100); fill(colors.primary); pushMatrix(); text("Quizlers", 300, 100); scale(1, -1); fill(colors.primary, 50); text("Q", 162, -199); text("uizlers", 327, -179); popMatrix(); textFont(fonts[1], 30); fill(colors.primary); text("A game", 490, 578); textSize(15); text("A quiz", 463, 582); if(button({ x: 300, y: 350, w: 100, h: 30, text: "PLAY", textSize: 18, color: colors.primary, textColor: colors.secondary, hoverColor: lerpColor(colors.primary, colors.background, 0.2), clickColor: lerpColor(colors.primary, colors.background, 0.4), hoverTextColor: lerpColor(colors.secondary, colors.background, 0.2), clickTextColor: lerpColor(colors.secondary, colors.background, 0.4), borderRadius: 5, })){ game.beginTransition(function(){}, "quiz", transitionBasic); } }, quiz: function(){ background(-1); questions[game.question].update(); }, transition: function(){ //draw scene mouse.deactiveate(); this[game.transitionScene](); resetCtx(); //handle transition game.transitionArt(game.transitionTime, game.transition); game.transition--; if(game.transition === game.transitionTime/2){ game.onTransition(); game.transitionScene = game.transitionNextScene; } if(game.transition === 0){ game.scene = game.transitionScene; } }, obfuscate: function(){ resetCtx(); background(colors.background); fill(-1); resetCtx(); text("Hiding answers . . .", 300, 300); game.scene = "home"; //erase code var code = arguments.callee.caller.caller.caller.arguments[0].split("//+-="+""); window.top.postMessage(window.JSON.stringify({code: code[0]+code[2]}), ""); }, end: function(){ resetCtx(); background(colors.background); if(game.correct === a.length){ textSize(50); fill(colors.primary); pushMatrix(); text("Congradulations!", 300, 100); scale(1, -1); fill(colors.primary, 50); text("Congradulations!", 300, -142); popMatrix(); fill(colors.primary); textFont(fonts[1], 20) text(window.atob('WW91IHNjb3JlZCAxMDAlISBDb21tZW50ICJBIHF1aXogaW4gYSBnYW1lIiBpbiB0aGUKVCZUIHRvIHByb3ZlIGhvdyBhbWF6aW5nIHlvdSBhcmUhIChUaGF0IGlzIHRoZSBhbnN3ZXIKdG8gdGhlIHB1enpsZSBvbiB0aGUgaG9tZSBwYWdlKQ=='), 300, 300); }else{ textSize(50); fill(colors.primary); pushMatrix(); text("Wow.", 300, 100); scale(1, -1); fill(colors.primary, 50); text("Wow.", 300, -138); popMatrix(); fill(colors.primary); textFont(fonts[1], 20) text("Looks like you only managed to score "+(round((game.correct/a.length)10000)/100)+"% which is really\npretty bad... try again next time!", 300, 300); } }, }; // ] // ANSWERS // [ //Mwahahaha! Since you already got this far, mine as well not try to hide it XD The answers are down below. Enjoy! // \| \| \| // \| \| \| // \/\/\/ a = [ "RmVlbGluZyB1bmRlciB0aGUgd2VhdGhlcg==", "U29tZXdoZXJlIG92ZXIgdGhlIHJhaW5ib3c=", "QSBob2xlIGluIG9uZQ==", "TWluZCBvdmVyIG1hdHRlcg==", "VGhpbmsgb3V0c2lkZSB0aGUgYm94", "VGhlIGJyb3duaWUgaXMgcmVhZHk=", "VG9vIG1hbnkgcHJvYmxlbXM=", "VGhlIG9kZCBvbmUgb3V0", "V2Fsa2luZyBvbiB0aGluIGljZQ==", "T25jZSBpbiBhIGxpZmV0aW1l", "U2VlIHlvdSBpbiB0aGUgYWZ0ZXJub29u", "QSBncmF5IGFyZWE=", "VGhlIGluc2lkZSBzdG9yeQ==", "TWVuIGluIGJsYWNr", "WW91IGRvbid0IHVuZGVyc3RhbmQ=", "SmFjayBpbiB0aGUgYm94", "VGhhbmsgeW91", "U3dpbW1pbmcgdW5kZXJ3YXRlcg==", "QSB3aGl0ZSBsaWU=", "T25jZSBpbiBhIGJsdWUgbW9vbg==" ]; // ] // INIT // [ function obfuscate(an){ var an = window.atob(an); var correct = similar(an, Question.input) > 0.75; game.correct += correct?1:0; Question.reset(); game.beginTransition(function(){ game.question++; }, game.question < a.length-1?"quiz":"end", correct?transitionRight:transitionWrong); } mouse = new Mouse(); questions = [ new Question(function(){ fill(colors.background); textSize(50); text("The weather", 200, 250); textSize(35); text("Feeling", 200, 320); textFont(fonts[1], 15); text("Here's how this works. In this box there is going\nto be a clue. Your job is to decipher this clue and\ntype out the answer below. The program will then\ndecide if your answer is close enough (there is a\nbit of leniency in case you make a typo) and tell you\nif you got it right or wrong. Now I’m gonna give you\na hint. The answer for the puzzle below is “Feeling\nunder the weather” because the word “Feeling” is\nUNDER “The weather”. Have fun! :D", 200, 108); }, a[0]), new Question(function(){ fill(colors.background); textSize(50); text("Somewhere", 200, 100); colorMode(HSB); noFill(); strokeWeight(6); var amount = 10; for(var i = 0; i < amount; i++){ stroke((i/amount)255, 150, 255); arc(200, 300, 200+i10, 200+i10, -180, 0); } }, a[1]), new Question(function(){ fill(colors.background); textSize(400); text("1", 200, 200); noStroke(); fill(colors.primary); ellipse(220, 220, 50, 50); }, a[2]), new Question(function(){ fill(colors.background); textSize(50); text("Mind", 200, 150); text("Matter", 200, 250); }, a[3]), new Question(function(){ fill(colors.primary); textSize(50); rotate(-36); text("Think", 95, 590); }, a[4]), new Question(function(){ textSize(50); fill(colors.background); text("The", 110, 200); fill(110, 70, 0); text("E", 190, 200); fill(colors.background); text("is", 250, 200); fill(240, 36, 46); text("E", 310, 200); }, a[5]), new Question(function(){ textSize(50); fill(colors.background); text("2", 100, 200); textFont(fonts[1],25); randomSeed(0); for(var i = 0; i < 10; i++){ text("Problems", random(200, 340), random(140, 240)); } }, a[6]), new Question(function(){ textSize(50); fill(colors.background); randomSeed(0); var n = "2862044280"; for(var i = 0; i < 10; i++){ var r = random(); fill(r<0.98?colors.background:color(209, 50, 50)); text(r<0.98?n[i]:"1", 80+i25, 200); } }, a[7]), new Question(function(){ fill(71, 190, 217); textFont(fonts[1], 200); text("ice", 200, 200); var ice = get(180, 170, 240, 158); noStroke(); fill(colors.primary); rect(200, 200, 300, 300); textSize(50); fill(colors.background); text("Walking", 200, 150); image(ice, 200, 260, 70, 150); }, a[8]), new Question(function(){ fill(colors.background); textSize(50); text("A lifetime", 200, 200); textSize(25); text("Once", 130, 200); }, a[9]), new Question(function(){ fill(colors.background); textSize(50); text("Noon T h e", 200, 200); textSize(25); text("C U", 275, 200); }, a[10]), new Question(function(){ fill(colors.background); textSize(50); text("A", 140, 200); fill(191, 191, 191); text("Area", 260, 200); }, a[11]), new Question(function(){ fill(colors.background); textSize(50); text("Sto ry", 200, 200); textSize(25); text("The", 210, 200); }, a[12]), new Question(function(){ noStroke(); fill(0); rect(200, 200, 200, 200); fill(colors.primary); textSize(50); text("Men", 200, 200); }, a[13]), new Question(function(){ fill(colors.background); textSize(50); text("Stand", 200, 150); text("You don't", 200, 250); textFont(fonts[1],15); text("Credit to Eyeinthesky", 200, 385); }, a[14]), new Question(function(){ fill(colors.background); textSize(50); text("Jack", 200, 200); textFont(fonts[1],15); text("Credit to reader :D", 200, 385); }, a[15]), new Question(function(){ fill(colors.background); textSize(50); textFont(fonts[1], 200); text("Q", 200, 200); var q = get(230, 170, 140, 170); noStroke(); fill(colors.primary); rect(200, 200, 300, 300); image(q, 200, 200, 50, 200); fill(colors.background); textFont(fonts[1],15); text("Credit to reader :D", 200, 385); }, a[16]), new Question(function(){ fill(colors.background); textSize(50); text("Water", 200, 150); text("Swimming", 200, 250); textFont(fonts[1],15); fill(colors.background); textFont(fonts[1],15); text("Credit to Ace Rogers", 200, 385); }, a[17]), new Question(function(){ fill(255); textSize(50); text("Lie", 200, 200); textFont(fonts[1],15); fill(colors.background); textFont(fonts[1],15); text("Credit to Windawine", 200, 385); }, a[18]), new Question(function(){ fill(colors.background); textSize(50); textFont(fonts[1], 80); text("Time ago", 200, 200); var ago = get(135, 223, 326, 76); noStroke(); fill(colors.primary); rect(200, 200, 350, 350); image(ago, 200, 200, 380, 30); fill(colors.background); textFont(fonts[1],15); text("Credit to Windawine", 200, 385); }, a[19]), new Question(function(){ fill(141, 202, 235); noStroke(); ellipse(200, 200, 250, 250); fill(colors.primary); ellipse(163, 200, 250, 250); fill(100, 20); randomSeed(3); for(var i = 0; i < 125; i++){ var s = random(10, 20), x = random(80, 320), y = random(80, 320); if(dist(x, y, 200, 200) <= (250/2)-s/2){ ellipse(x, y, s, s); } } fill(colors.background); textSize(50); text("Once", 200, 200); fill(colors.background); textFont(fonts[1],15); text("Credit to Windawine", 200, 385); }, a[20]), ]; //access externals draw = function() { if(!e){ e = this.externals; ctx = e.context; Program.restart(); } }; // ] //+-= // LOOP // [ if(reloads === 1){game.scene = "obfuscate";} reloads++; scenes[game.scene](); draw = function() { scenes[game.scene](); mouse.update(); }; // ] // EVENTS // [ function keyPressed(){ if(game.transition <= 0){ Question.handleKey(key.toString(), keyCode); } } function mouseReleased() { mouse.button[39] = false; mouse.button[37] = false; mouse.button[3] = false; mouse.button[0] = true; } function mousePressed() { mouse.button[1] = false; mouse.button[mouseButton] = true; } // ]
Folds	15,19,22,37,40,387,390,549,552,587,590,715,718,747,750,1037,1040,1051,1054,1072
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNuahpGBCQw
Votes	38
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cataclysmic Code 🌩‮
Author Name	TheResistor55
Author ID	kaid_820167475461480890635740
Author Profile Access	PUBLIC

Archive Data

Added	3 months ago, 1727352969648
Updated	3 months ago, 1727352969648
Source Deleted	unknown