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:
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.
.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.
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:
La remise est a effectuer sur
Studium. Remettez un
unique répertoire compressé avec la commande (g)zip
avec toutes les ressources nécessaires.