===== Quizz Alsace =====

Dans le cadre de mon macro-projet, j'aimerais aborder la notion de jeu. Dans cette optique, il me paraît incontournable de travailler autour de mécanismes de jeu et de dispositifs ludiques et interactifs. C'est pourquoi j'ai décidé de développer une affiche interactive prenant la forme d'un plateau, à l'image d'un jeu de l'oie, sur le thème de l'Alsace.
----
==== L'affiche ====

{{:wiki:projets:quizz-alsace:plateau_de_jeu.jpg? |}}
----
==== Fonctionnement de l'affiche ====

Des pions "conducteurs" évoluent sur le plateau de jeu, suite à des lancers de dés. Selon la case sur laquelle un pion atterrit, une question s'affiche. Elle reste affichée pendant un temps limité, puis la réponse s'affiche. Si le joueur a répondu correctement, il peut relancer le dès. Sinon, il s'arrête et le joueur suivant joue.

Il y a cinq type de cases : 
  * Des cases "de passage", sans interaction (lorsque le joueur atterrit sur cette case, il ne rejoue pas, c'est au tour du joueur suivant)
  * Des cases "langue", avec des questions à propos du jargon alsacien
  * Des cases "culture", avec des questions de culture générale sur l'Alsace
  * Des cases "défi", avec des challenges à relever
  * Et enfin des cases "chance", qui donnerons des instructions au joueur (par exemple reculer son pion de 5 cases)

Toutes les cases d'une même catégorie sont traitées comme un seul et unique bouton. Il y a donc en tout quatre boutons sollicités (et non cinq puisque les cases de passage ne nécessitent aucune interaction).

(Voir la possibilité d'intégrer un bouton "dé" qui génère un chiffre aléatoire en 1 et 6)

----
==== Fonctionnement du programme ====


Lorsqu'un bouton "catégorie" est sollicité, voilà ce que le programme fait :
  * Afficher une image question piochée au hasard dans un ArrayList de la catégorie associée au bouton.
  * Lancer un chronomètre de 5 secondes.
  * Au terme de ces 5 secondes, afficher l'image réponse associée à l'image question.
  * Supprimer les deux images du tableau de sorte à ce que la question ne soit plus posée.

----
==== Le code ====

Ce code est une version d'essai((Il faut encore : remplir les ArrayList; compléter le void keyReleased () {} avec trois boutons pour les catégories "défi", "chance" et "langue"; mettre éventuellement un dé virtuel; faire apparaître le décompte de temps au lancement d'une question; supprimer les questions déjà affichées afin qu'elles ne soient posées qu'une fois.)).

=== Le setup et le draw ===
<code>

// déclaration des variables globale
// variables pour les tailles des tableaux (necessite autant de couples d'images pour la categorie)
int tailleCulture=1;
int tailleLangue=1;
int tailleDefi=1;
int tailleChance=1;
//Les tableaux eux-mêmes, qu'on crée de la taille déclarée plus haut
ArrayList culture = new ArrayList<question>(tailleCulture);
ArrayList langue = new ArrayList<question>(tailleLangue);
ArrayList defi = new ArrayList<question>(tailleDefi);
ArrayList chance = new ArrayList<question>(tailleChance);

int tempsMesure = 0; // mesure du temps 

boolean isAnnimation = false;

//A l'execution on doit remplir les tableaux : on fait ca ici
void setup() {

  size (1000, 800);
  background (#BF3534);


  // Remplir tableau culture
  String Categ="culture";
  for (int i=0; i<tailleCulture; i++) {  
    //on fait appel à la methode déclarée séparement (comme pour les balles)
    question a=creerQuestion(i, Categ);  // on récupere la position dans le tableau et la categorie, qui sont dans les noms des fichiers image
    //ajoute la question dans l'ArrayList
    culture.add(a);
  }
}


void draw() {

  if (isAnnimation) {
    question q = (question)culture.get(0);
    q.afficherQuestionEtReponse(tempsMesure);
  }
}

</code>

=== La class qui crée le type "question" ===

Cette class crée un type "question", constitué d'une image question et d'une image réponse, et permet, grâce à une méthode, de déclencher leur affichage successif grâce à un timer.

<code>
class question {

  // Attributs
  PImage quest;
  PImage rep;

  // Constructeur
  question(PImage _quest, PImage _rep) {
    quest = _quest;
    rep = _rep;
  }

  // Méthodes
  // Timer question réponse
  void afficherQuestionEtReponse (int m) { // temps en ms
    if ((millis()-m)<(10*1000)) { // si le temps est inférieur à 10s ...
      image (quest, 0, 0, width, height); // ... afficher l'image question
    }
    else{ // si le temps est > 10s
      //mettre le timer ici
      image (rep, 0, 0, width, height);
    }
  }
}

</code>


=== La méthode qui permet de créer les questions ===
<code>
question creerQuestion(int indiceImage, String Categ){     //le indiceImage est l'indice de l'image à télécharger, et correspond  à la valeur de l'indice i utilisé dans la boucle "for" du setup(), mais pas la même variable
// question fait reference à la classe question : ca indique que cette méthode renvoie (le return) un objet de type question (comme un humain spécifique pour la classe qui definit tous les humains)
    
    //images pour les questions de la categorie Categ
    //On charge le couple d'images
    PImage im1 = loadImage( indiceImage +"_quest_"+Categ+ ".png" );
    PImage im2 = loadImage( indiceImage +"_rep_"+Categ+ ".png" );
    
    //crée la question (de la classe) avec les images chargées
    question a = new question (im1, im2);
    
    //on renvoie la question créée pour la stocker dans le tableau
    return a;
}
    
</code>


=== La méthode qui déclenche l'affichage des questions quand un bouton est sollicité ===
<code>
void keyReleased() {
  // affichage d'une question culture
  if (key == 'q') {
      if(culture.isEmpty()){  //on verifie que la liste (le tableau) dans laquelle on veut choisir un element n'est pas vide
          //image d'erreur car on veut afficher une question quand on n'en a pas en stock
      }
      else{    //execution normale : on va charger un aleatoire, chercher la question à cette position dans le tableau, et utiliser sa methode ( a la question) Timer
        tempsMesure = millis(); // lire le timer au moment ou on lance la méthode afficherQuestionEtReponse()
        isAnnimation =true;
      }
  }
}
</code>