Rapport STIC I

Exercice 3 - STIC I - 24.11.2021

Larissa Santos Vieira

1 - Liens

2 - Objectifs

L'objectif principal de cette page est d'aider les personnes qui apprennent le français à mieux comprendre et connaître les expressions utilisées dans la vie de tous les jours. En effet, le français est une langue qui utilise beaucoup d'expressions pour décrire les situations de tous les jours, mais quand on apprend cette langue et même une fois qu'on la maîtrise bien dans le plan compréhension et expression, les étrangers ont souvent du mal à comprendre ce langage imagée. Cette page peut être utilisée de deux manières:

3 - Design

Lorsque l'utilisateur arrive sur la page, il lit le titre, la petite introduction et les instructions qui lui expliquent ce qu'il peut faire sur cette page. L'utilisateur peut décider de lui-même s'il préfère d'abord prendre connaissance des expressions et leurs significations, faire directement le quiz ou s'intéresser directement au sens des images qui apparaissent en fond de page.

Afin d'optimiser l'apprentissage, dans la partie théorique de cette page, j'ai créé un tableau avec trois colonnes proposant l'expression-sa signification-son origine. Pour faciliter la lecture de l'utilisateur, lorsque la souris est sur un point du tableau, toute la ligne change de couleur pour un meilleur guidage de la lecture. Dans la partie quiz, j'ai décidé de mettre en avant un feedback direct, c'est-à-dire que lorsque l'utilisateur choisi une réponse, soit il est félicité et peut passer à la suite grâce à l'apparition d'un bouton "Question suivante", soit on lui dit qu'il a fait un mauvais choix et on lui demande de réessayer (il ne peut pas avancer tant qu'il n'a pas trouvé la bonne réponse). En plus du feedback direct écrit qui apparait en bas du quiz, l'utilisateur voit sa réponse devenir verte ou rouge lui signalant si celle-ci est correcte ou fausse. A l'aide d'une balise de titre, il est possible de voir au fur et à mesure qu'on avance dans le quiz combien de questions ont été répondues sur un total de 10 questions. Finalement, dans la partie "images de fond", l'utilisateur doit essayer de deviner leur sens. Pour vérifier sa réponse il clique sur le bouton "afficher l'explication" et auto-évalue s'il a fait juste ou pas, donc cette partie ne possède pas de feedback intégré. L'utilisateur n'est pas obligé d'afficher systématiquement chaque explication pour avancer et peut, s'il le désire, juste voir les autres images en cliquant sur "image suivante"

4 - Production

Phase de lecture et de réflexion sur l'exercice

Tout d'abord, j'ai commencé par la lecture de la page Wiki de l'exercice 3 ainsi que les lectures supplémentaires conseillées ( computation avec JavaScript et l'interactivité avec JavaScript). Par la suite, comme je n'avais pas vraiment d'idée de ce que je pouvais créer et que je ne voulais pas vraiment donner suite à mon exercice 2, j'ai été regarder quelques travaux des années précedentes pour m'en inspirer. Je me suis beaucoup intéressée aux travaux contenant des quiz et j'ai décidé de faire la même chose. Le sujet de mon exercice a été le point plus difficle à trouver, jusqu'à ce qu'en discutant avec des amis qui ont appris le français, comme moi plus tard, et en parlant de notre difficulté à comprendre jusqu'à aujourd'hui les expressions françaises que l'idée m'est venue. Ensuite, j'ai visité plusieurs sites d'expressions françaises afin de choisir celles qui me semblaient être courantes et qui m'avaient posé à moi et à mes amis de la peine.

Phase de création

Certainement la partie la plus longue, tout d'abord j'ai commencé par la création de ma page HTML et de son contenu. Ensuite, pour créer mon quiz, j'ai essayé de le créer à l'aide de sitepoint mais après une journée entière de travail, j'ai compris que ce type de quiz ne convenait pas. Je me suis donc rappelé d'un travail de la volée précédente. Je me suis beaucoup aidé de la page créé par Elias Hamdaoui et de son quiz japonais. En effet, comparé à l'autre quiz, j'ai plus facilement compris son code et il me convenait plus, car je cherchais une manière de créer un quiz avec un feedback direct et d'après les quelques recherches que j'ai fait, son quiz était le seul qui pouvait répondre à ce besoin. Suite à ça, j'ai adapté ce code à mes besoins, en ajoutant des fonctions et en changeant quelques parties du code. Pour finir, j'ai créé ma page CSS et j'ai essayé de donner un aspect pédagogique à celle-ci.

5 - Auto-évaluation

Comparé aux deux exercices précédents celui-ci a été plus difficile. Non seulement par le manque d'idée "originale", mais aussi parce que j'ai eu plus de difficulté à atteindre mes objectifs et malgré un bon avancement, ma page n'est malheureusement pas aussi bien que je l'espérais. A plusieurs reprises j'ai essayé d'instaurer un score et d'empêcher l'utilisateur de cliquer plusieurs fois sur les mêmes boutons dans le quiz et tout cela sans succès, car le code fonctionnait que par moments et pas systématiquement. Un autre problème que j'ai essayé "en vain" de résoudre était celui d'avoir un quiz avec 10 questions, mais d'avoir 30 à 50 expressions parmi lesquelles 10 étaient prises pour le quiz. Comme pour le premier problème, parfois le quiz s'arrêtait bien à 10 questions, mais le plus souvent il s'arrêtait à des nombres aléatoires. Cependant, ce travail m'a permis d'en apprendre beaucoup sur les expressions françaises, mais aussi sur leurs origines, ce qui m'a été très intéressant !

6 - Bibliographie

Liée à la programmation

Liée au contenu (images, expressions et explications)

7 - Ressources