javascript Programa de Multipla Escolha JavaScript apenas

[Pedro Ivan Pimenta Fagundes 0]

Olá,

Venho por meio deste fórum expor meu código para criar um programa de multipla escolha que armazena as respostas e randomiza as opções de respostas.
Gostaria de receber críticas, pois sou muito novo na programação.
 

//Criado por Pedro Ivan Pimenta, com auxílio do site KhanAcademy (a parte de botões) e do fórum IMasters.com.br (em diversos aspectos).


var g = 0;

var changeColor =  [color(140, 140, 140), color(76, 76, 82), color(3, 138, 9), color(153, 2, 2)];

fill(0, 0, 0);
var p1 ={
    pergunta: "p1:Quanto é 2+2?",
    resposta: ["4","8","10","2"]
    
};
var p2 ={
    pergunta: "p2: Quanto é 20+20?",
    resposta: ["40","80","100","20"]
    
};
var p3 ={
    pergunta: "p3: Quanto é 10+20?",
    resposta: ["30","18","19","28"]
    
};
var p4 ={
    pergunta: "p4: Quanto é 100+20?",
    resposta: ["120","18","19","28"]
    
};
var p5 ={
    pergunta: "p5: Quanto é 20+20?",
    resposta: ["40","18","19","28"]
    
};

var perguntas = [p1,p2,p3,p4,p5];
 perguntas.sort(function() {
     return 0.5 - Math.random();
 });

var questao = 0;
var acertos = 0;
var resultado = [];
var resultadoCor = [];
////
for(var i = 0; i <=perguntas.length; i++){
    resultado[i] = "";
    resultadoCor[i] = "";

}

///
var painel = function(){

fill(0, 0, 0);
rect(30,14, 320,67);
rect(30,324, 320,67);
fill(255, 255, 255);
textSize(12);
textAlign(LEFT, TOP);
text(perguntas[questao].pergunta, 60,30,270,100);

text("acertos: "+acertos, 60,350,270,100);
text("total: "+perguntas.length, 60,350+20,270,100);
text("Q: "+(questao+1)+"º", 60,350-20);
textSize(16);

//text(g, 148,350-20);

textSize(16);
text(resultado[questao], 240, 326,66,280);
//text(resultadoCor[questao],184,334);


};



  painel();
  
  var Button = function (config){
this.x = config.x || 150;
    this.y = config.y || 0;
    this.width = config.width || 150;
    this.height = config.height || 50;
    this.label = config.label || "nula";
      
  };
  Button.prototype.drawOptions = function (x,y,c){
      this.label =  perguntas[x].resposta[y];
      
      fill(changeColor[c]);
       rect(this.x, this.y, this.width, this.height, 5);
    fill(255, 255, 255);
    textSize(19);
    textAlign(LEFT, TOP);
    text(this.label, this.x+10, this.y+this.height/4);
};
 Button.prototype.drawButton = function (x,y){
      
      fill(120, 70, 120);
       rect(this.x, this.y, this.width, this.height, 5);
    fill(255, 255, 255);
    textSize(19);
    textAlign(LEFT, TOP);
    text(this.label, this.x+10, this.y+this.height/4);
};
 
 Button.prototype.isMouseInside = function() {
    return mouseX > this.x &&
           mouseX < (this.x + this.width) &&
           mouseY > this.y &&
           mouseY < (this.y + this.height);
};

var positionX = 66;
var positionY = [0,55,2*55,3*55];
var btn1;
var btn2;
var btn3;
var btn4;
// função refresh que irá randomizar as opções de respostas
var refresh = function(){
  positionY.sort(function() {
      return 0.5 - Math.random();
  });
  
  btn1 = new Button({
    x:positionX,
    y: 95 + positionY[0],
    width: 150
   });

 btn2 = new Button({
    x:positionX,
    y: 95 + positionY[1],
    });

 btn3 = new Button({
    x:positionX,
    y: 95 + positionY[2],
   });

 btn4 = new Button({
    x:positionX,
    y: 95 + positionY[3],
   });
};
refresh();

 

var botao = new Button({
    x:222,
    y: 95+3*55,
    width: 100,
    height: 50, 
    label: "Próximo"
    
});

var btns = function(a,b,c,d){
    btn1.drawOptions(questao,0,a);
    btn2.drawOptions(questao,1,b);
    btn3.drawOptions(questao,2,c);
    btn4.drawOptions(questao,3,d);
    botao.drawButton();
    painel();
};

btns(1,1,1,1);

draw = function(){
    

        if(questao>=perguntas.length){
        background(128, 138, 245);
                 questao=0;

                  if(resultadoCor[0]===0){
                     btns(2,1,1,1);

                     } else if(resultadoCor[0]===1){
                     btns(2,3,1,1);
  
                     }else if(resultadoCor[0]===2){
                         btns(2,1,3,1);

                     }else if(resultadoCor[0]===3){
                         btns(2,1,1,3);

                     }else{
                      btns(1,1,1,1);
 
                     }
                 
        }
        if(resultado[questao]!==""){
               g=1;
               painel();
                
                }    else{
                         g=0;
                         painel();
                     }

       
                
        mouseClicked = function() {
                     
        if( g === 0){
                if (btn1.isMouseInside()){
                            background(169, 240, 93);
                    resultado[questao] = "Acertou, mizeravis";
                    resultadoCor[questao] = 0;
                    g++;
                    acertos++;
                    btns(2,1,1,1);
                    
                    
               } else if (btn2.isMouseInside()){
                   background(247, 151, 151);
               resultado[questao] = "2Errou!";
               resultadoCor[questao] = 1;
               g++;
               btns(2,3,1,1);
              
               }else if(btn3.isMouseInside()){
                   background(240, 93, 93);
                   resultado[questao] = "3Errou!";
                   resultadoCor[questao] = 2;
               g++;
               btns(2,1,3,1);
               }else if(btn4.isMouseInside()){
                   background(247, 46, 46);
                   resultado[questao] = "4Errou!";
                   resultadoCor[questao] = 3;
               g++;
               btns(2,1,1,3);
               }
               
         }
              if (botao.isMouseInside() ){
                   background(219, 173, 219);
                     questao++;
                      refresh();
                     if(resultadoCor[questao]===0){
                         btns(2,1,1,1);

                     } else if(resultadoCor[questao]===1){
                         btns(2,3,1,1);
   
                     }else if(resultadoCor[questao]===2){
                         btns(2,1,3,1);

                     }else if(resultadoCor[questao]===3){
                         btns(2,1,1,3);

                     }else{
                          btns(1,1,1,1);
                     }
                    
                } 
         
     };
        
              mouseMoved = function() {
            if( g===0){
            if (btn1.isMouseInside()) {
                btns(0,1,1,1);
            } 
            
            else if (btn2.isMouseInside()) {
                btns(1,0,1,1);      
            }
            else if (btn3.isMouseInside()) {
                btns(1,1,0,1);        
        
            }
             else if (btn4.isMouseInside()) {
                btns(1,1,1,0);       
        
            }
            
            else{
                btns(1,1,1,1);   
            }
            }
              };
        
        
};

pode-se observar o resultado direto pelo site do khan academy: https://pt.khanacademy.org/computer-programming/multipla-escolha/6542821373968384


Muito obrigado!! 

[Rafael </> 0]

Incrivel!! Muito bom Pedro! Você usou alguma biblioteca ou pluguin?

Tentei usar algumas ideias contidas nesse código, porém ainda não funcionou.