Devoir 1: Jeu musical côté client

Dans ce devoir, vous allez faire un jeu qui permet d'interroger un joueur sur ses connaissances en théorie musicale. Les connaissances qui seront testées concernent majoritairement le cycle de quintes. Les questions que vous pouvez poser sont au moins de trois types (vous pouvez en ajouter), en voici 4 accompagnés d'exemples de questions pour chaque type:

armature
  1. Quel est le nombre et la nature des altérations portées à l'armure de la tonalité de DOb majeur ? (réponse 7b)
  2. Quel est le nombre et la nature des altérations portées à l'armure de la tonalité de LA mineur ? (réponse 0)
tonalité relative
  1. Quelle est la relative mineure de DOM ? (réponse LAm)
  2. Quelle est la relative majeure de FA#m ? (réponse LAM)
accords
  1. Quelle sont les notes de l'accord de SIbm ? (réponse SIb REb FA)
  2. Quel est le nom de l'accord constitué de ces trois notes: SIb FA REb ? (réponse SIbm)
lecture à vue
  • Dans ce type de question, des notes sont montrées au joueur sur une portée et l'utilisateur doit identifier les notes correspondantes. Il s'agit du type de question qui se prête le plus à des innovations côté ergonomique.

Dans ce devoir, on adoptera la convention que les notes sont en majuscule, que leur altération peut suivre (# ou b) et que les tonalités mineures (resp. majeures) sont indiquées à l'aide d'un m minuscule (resp. M majuscule).

Pour chaque question, un temps limité est donné au joueur et les points sont (notamment) fonction du temps mis par le joueur pour répondre correctement. Une réponse fausse n'amène aucun point.

.

Cahier des charges

Votre jeux doit être programmé en HTML5, CSS et javascript. Vous pouvez (c'est même recommandé) vous aider de frameworks comme JQuery et Bootstrap. Votre jeu doit être fluide en ce sens qu'il doit fonctionner aussi harmonieusement sur un laptop qu'une tablette. Vous devez autant que faire se peut adopter les principes de l'amélioration progressive. Il y a bien sûr une limite à cela dans la mesure où javascript sera utilisé pour vérifier si une réponse est correcte. Ainsi, quelqu'un qui désactive javascript n'aura (à priori) pas accès aux réponses et donc au système de points. Votre code HTML ne doit contenir aucune commande CSS, ni aucun code javascript.

Votre page HTML (devoir1.html) doit contenir (au moins) deux sections: l'une où se déroulera le jeu si javascript est actif, l'autre où les connaissances utilisées sont explicitées. Voici par exemple (ça ne serait pas forcément un bon choix) un codage possible de devoir1.html.

Les connaissances de base doivent être disponibles sous forme HTML, dans une section d'identificateur connaissances . C'est cette information qui sera au minimum affichée à l'utilisateur de votre page s'il désactive javascript. Vous ne devez pas dupliquer spécifiquement cette connaissance en javascript. C'est à dire qu'il ne devrait pas y avoir dans votre code javascript d'initialisation manuelle de structures correspondant à cette information. Vous l'obtiendrez en lisant la DOM de la section connaissance dans votre code HTML.

Vous pouvez définir l'ergonomie de votre jeu comme vous le souhaitez. Vous pouvez par exemple demander à l'utilisateur de cliquer sur des boutons pour saisir sa réponse, vous pouvez également lui montrer un clavier de piano sur lequel il pourra cliquer, etc. Si vous prenez du code déjà fait pour visualiser un clavier de piano, vous devez indiquer vos sources en entête des fichiers concernés. De même, toute récupération de code doit être indiquée. Si vous omettez d'indiquer une source de code et que nous le découvrons lors de la correction, vous serez dans une situation de plagiat. Voici une page reliées au développement d'un piano en javascript en SVG, une autre qui semble bien conçue.

Vous devez penser à un système de points à afficher au moins tant que l'utilisateur joue sur la page. Vous pourriez faire persister le pointage d'un joueur en utilisant les WebStorages d'HTML5.

Votre page Web doit être abritée au DIRO et vous en indiquerez l'URL dans le document readme qui devra être joint à votre projet.

Notation

Important: vous devez remettre un fichier (g)zip contenant toutes les dépendances de votre document devoir1.html: la ou les feuilles CSS/Javascript, des images éventuelles; ainsi qu'un fichier readme (ou un rapport pdf d'au plus 3 pages si vous le souhaitez). Le nom des personnes impliquées (remise en binôme) doit figurer dans ce document, tout comme la mention de tous les codes d'autres personnes utilisés ou adaptés pour réaliser votre projet. Les technologies embarquées dans votre jeu doivent également être listées. Au minimum, vous devez utiliser HTML, CSS et javascript.

La notation dépendra de critères comme: