Help: New Project Question (states)

thenetdom

Hello Everyone. I'm new to the course. My processing experience is limited and I need your help.

Here's what I want to do:

It is a simple game-type app, the user will have 2 options to answer a question. It will have 5 questions.

So here are my specs:

SCREEN 1 Splash screen, it will have a START button that will take you to SCREEN 2.

SCREEN 2 Instructions, it will have a CONTINUE button that will take you to SCREEN 3.

SCREEN 3 Question 1, once it is answered you will see SCREEN 4

SCREEN 4 Question 2, once it is answered you will see SCREEN 5

SCREEN 5 Question 3, once it is answered you will see SCREEN 6

SCREEN 6 Question 4, once it is answered you will see SCREEN 7

SCREEN 7 Question 5, once it is answered you will see SCREEN 8

SCREEN 8 Score

Each question will have 2 answers, one is correct, one is wrong. User will select the proper answer with the Arrow Keys.

Each question will have 3 seconds to be answered. I want the score of each question to depend on the time it takes to answer it. ie. A correct answer will have a full value of 100 points, but every second it will loose 33 points. If user spends more than 3 seconds only 1 point will be awarded.

SCREEN 8 will show the score of each question and a total score.

---

My problems:

So far, I've only done single screen applications. I know how to set up a button and give actions to it using the

//Define my background image variable
PImage StartUpBack;


void setup(){
  //Screen Size
  size(1280,720);
  //Background Color
  background(255);
  //Background Image
  StartUpBack = loadImage("StartUpBack.png");

}

void draw() {
  //Can I have my mouseClicked function inside of draw? if so, I think I can make a single function with all my screens, since I hace a linear sequence.

}

//in the mouseClicked I was planning to give the START and CONTINUE buttons their functionality, but how can I chance  //position of buttons depending on the screen I'm looking at?

void mouseClicked() {

  }
}

Imagine this app as a more interactive power point presentation or what Macromedia Director used to be....

I will share the code once I have it ready.

_vk

google:

state site:processing.org

or

states site:processing.org

This should get you started : )

thenetdom

Thanks _Vk, I found a post regarding the best practices of the States, but then I go to the glossary and can't find any information regarding StartState or SetState.

I played a little bit with the code. I tried the noLoop() and loop() functions without success, I also tried changing the frame rate to 0 to pause, I thought that the mouseClicked could change it back to 60 frames per second and then change it again to 0 inside draw to pause it, didn't work.

thenetdom

Can I create each question as a separate processing sketch and then create one sketch to call them in sequence?

_vk

That post has a very specific question and approach. Try this instead

http://forum.processing.org/two/discussion/comment/27641#Comment_27641

can't find any information regarding StartState or SetState.

Those are functions defined by the author...

GoToLoop

Perhaps this online example can give ya some ideas too:
http://studio.processingtogether.com/sp/pad/export/ro.9eDRvB4LRmLrr/latest

thenetdom

Thanks a lot _VK, it is defenitely looking better....

I use the N key to jump from the Splash screen to the first question, I use the arrow keys to answer the first question but then, when I click N again, it does not move to question 2, I'm looking into this, Once I get it fixed I will work on the score. Thanks a lot.

PImage StartUpBack;
PImage QuestionsBack;
PImage LeftAnswer;
PImage RightAnswer;
int num = 0;
int score1 = 20;
int score2 = 20;
int score3 = 20;
int score4 = 20;
int score5 = 20;


void setup(){
  //Screen Size
  size(1280,720);
  //Background Color
  background(255);
  //Background Image
  StartUpBack = loadImage("StartUpBack.png");
  QuestionsBack = loadImage("QuestionsBack.png");
  LeftAnswer = loadImage("LeftAnswer.png");
  RightAnswer = loadImage("RightAnswer.png");
}

void draw() {
  switch(num) {
   case 0: 
     //Splash Screen
     image(StartUpBack, 0, 0);
 if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  }

      break;

   case 1:
   //Question 1
     image(QuestionsBack, 0, 0);
        if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
        print("left Q 1");
        image(LeftAnswer, 0, 0);
      if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num=2;

    }
  } 
    } 
    //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
        print("Right Q1 ");
        image(RightAnswer, 0, 0);
        if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num=2;

    }
  }
    } 
  } else {
    print("no valid 1 ");
  }
  break;

case 2:
   //Question 2
     image(QuestionsBack, 0, 0);
        if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
        print("left Q 2");
      if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  } 
    } 
    //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
        print("Right Q2 ");
        if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  }
    } 
  } else {
    print("no valid 2 ");
  }
  break;

case 3:
   //Question 3
     image(QuestionsBack, 0, 0);
        if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
        print("left Q 3");
      if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  } 
    } 
    //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
        print("Right Q3 ");
        if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  }
    } 
  } else {
    print("no valid 3 ");
  }
  break;

case 4:
   //Question 4
     image(QuestionsBack, 0, 0);
        if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
        print("left Q 4");
      if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  } 
    } 
    //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
        print("Right Q4 ");
        if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  }
    } 
  } else {
    print("no valid");
  }
  break;

case 5:
   //Question 5
     image(QuestionsBack, 0, 0);
        if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
        print("left Q 5");
      if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  } 
    } 
    //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
        print("Right Q5 ");
        if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num++;

    }
  }
    } 
  } else {
    print("no valid");
  }
  break;


     case 6:
     //Scores
 if (keyPressed) {
    if (key == 'n' || key == 'N') {
      num=0;
       break;
    }
  }
  }
}

thenetdom

GoToLoop thanks for the button examples. I'll see if I can implement them.

I just found a new problem to the way I have my code at this point... one the user clicks on the right or left keys to choose an answer, they can still change their answer afterwards, is there a way to kill the second option once the answer has been chosen?

Thanks!

thenetdom

After doing some clean up on the brackets I was able to make it work. The difference between the code below and the one I posted before is that

case 0 is my splash page (as before) case 1 is my question 1 case 2 instead of it being my question 2 as it used to, now it is the answer screen if Left case 3 answer screen if right case 4 question 2....I will complete the rest.

now, I need help with my score. I want to give the user 5 seconds to answer, each second the user will loose 4 points, so, if the user answers right away, 20 points will be awarded, if all 5 seconds have passed I want to give them 1 point, leaving 0 points only for wrong answers.

What can I use to count time?

I'm looking at millis() but how can I count how much time it passes from the moment the screen is displayed until the user answers?

Thanks in advance.

PImage StartUpBack;
PImage QuestionsBack;
PImage LeftAnswer;
PImage RightAnswer;
int num = 0;
int score1 = 20;
int score2 = 20;
int score3 = 20;
int score4 = 20;
int score5 = 20;
int TotalScore = 0;

void setup(){
  //Screen Size
  size(1280,720);
  //Background Color
  background(255);
  //Image Loading
  StartUpBack = loadImage("StartUpBack.png");
  QuestionsBack = loadImage("QuestionsBack.png");
  LeftAnswer = loadImage("LeftAnswer.png");
  RightAnswer = loadImage("RightAnswer.png");
}

void draw() {

  switch(num) {
   case 0: 
     //Splash Screen
     image(StartUpBack, 0, 0);
     if (keyPressed) {
        if (key == 'n' || key == 'N') {
           num=1;   
        }
     }   

      break;

   case 1:
   //Question 1
     image(QuestionsBack, 0, 0);
     if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
             num=2;

             } 


       //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
           num=3;

           }
       }    
    break;

   case 2:
   //Show Answer if LEFT
     image(LeftAnswer, 0, 0);
     if (keyPressed) {
        if (key == 'n' || key == 'N') {
        num=4;   
        }
     }   
    break;

   case 3:
   //Show Answer if RIGHt
     image(RightAnswer, 0, 0);
     if (keyPressed) {
        if (key == 'n' || key == 'N') {
        num=4;
        }
     }
     break;


     case 4:
   //Question 2
     image(QuestionsBack, 0, 0);
     if (key == CODED) {
        //If Left Arrow is pressed then...
          if (keyCode == LEFT) {
             num=5;

             } 


       //If Right Arrow is pressed then...
        else if (keyCode == RIGHT) {
           num=6;

           }
       }    
    break;

  }   
}