Giter Club home page Giter Club logo

taaltoolbox's Introduction

TaalToolBox App

TaalToolBox App est une application web et mobile axée sur l'apprentissage des langues.

Cette application est développée dans le cadre du cours "Projet d'intégration" du bachelier Technologie de l'informatique à l'EPHEC.

Ce projet utilise le Framework Vue.js 3 pour le Frontend, l'environnement d'exécution NodeJS pour le backend et une base de données PostgreSQL pour la persistance des données.

Pré-requis ⚠️

  • NodeJS & npm
  • Docker

Installation 🔨

Clonez le repository GitHub dans un dossier de votre choix :

git clone https://github.com/Rachiid007/TaalToolBox

Déplacez-vous dans le dossier du projet :

cd TaalToolBox

Démarrage 🚀

VScode 🔧

Pour éviter les erreurs, veuillez installer l'extension Vue Volar et activer le mode Takeover uniquement sur l'espace de travail !

Frontend (Vue.js 3) 💻

Rendez-vous dans le répertoire WEB, ouvrez une console et lancez la commande npm install pour installer les dépendances et npm run dev pour lancer l'application en mode développement. L'application sera accessible à l'adresse http://127.0.0.1:5173/.

Docker 🐳

  1. Veuillez créer un fichier .env dans le répertoire BACKEND et y ajouter les informations suivantes :
POSTGRES_PASSWORD=
  1. Lancer Docker et ouvrez une console dans le répertoire BACKEND et lancez la commande docker-compose up -d pour lancer la base de données en mode deamon (en arrière plan). Une base de données PostgreSQL sera alors accessible à l'adresse http://localhost:5432. Vous pouvez interagir avec la base de données via le mode intéractif de Docker en lançant la commande docker exec -it taaltoolbox_db_1 psql -U postgres.

Backend (NestJS) 💻

Ouvrez une console dans le répertoire BACKEND et lancez la commande npm install pour installer les dépendances et npm run start:dev pour lancer le serveur. Celui-ci sera accessible à l'adresse http://localhost:3000.

Veillez garder toutes les consoles ouvertes pour que l'application fonctionne correctement. 😉

taaltoolbox's People

Contributors

cardinpatson avatar pourbaix avatar rachiid007 avatar haaymar avatar he201916 avatar louislombaert avatar bricekouetcheu avatar

Stargazers

 avatar  avatar Bima Putra Lamanda avatar Hugo Delannoy avatar  avatar  avatar  avatar

Watchers

 avatar

taaltoolbox's Issues

Créer des quiz

Titre

En tant qu’utilisateur (prof), je souhaite pouvoir créer des quizz auxquels mes élèves pourront répondre afin de pouvoir les former.

02. Elève - Afficher les cartes qui contient le mot et son image

I. Titre

En tant qu'élève je souhaite visualiser le mot à traduire sur une carte et visualiser la réponse après afin de savoir si j'ai trouvé j'y suis presque ou raté la traduction du mot

II. Description

Après que l'élève aura choisie le nombre de carte qu'il souhaite avoir, il sera redirigé vers une page qui affichera une part une le nombre de carte que l'utilisateur jouera.

Le but ici est donc de récupérer en base de données le nombre de carte( mot, traduction, image, poids de la carte) que l'utilisateur aura choisi précedemment et les disposer de façon aléatoire dans le deck afin qu'il ne se retrouve pas toujours avec le même deck de carte s'il joue plusieurs fois d'affiler.

En dessous de la carte on aura un bouton Reveler qui permettra à l'utilisateur d'afficher la traduction de la carte. Lorsqu'on cliquera sur ce bouton, il sera remplacer par une suite de trois boutons (j'ai trouvé, j'y étais presque, je n'ai pas trouvé) qui permettra à l'utilisateur de s'auto évaluer lorsqu'il aura vu la traduction de le carte.

V. Maquette

  • Après avoir récupérer le nombre de carte les cartes sont afficher une part une ici, on a le mot Mouton et son image

image

  • Lorsque l'élève clique sur le bouton Révéler, il est remplacé par les 3 boutons ('ai trouvé, j'y étais presque, je n'ai pas trouvé) et le mot Mouton est remplacé par sa traduction Sheep

image

III. Critère d'acceptation

Validation

  • Lorsque l'utilisateur souhaite jouer à un deck il ne pourra avoir accès au deck que s'il a choisi au préalable le nombre de carte à jouer
  • Lorsque l'utilisateur souhaite afficher la réponse de la carte, il ne pourra la visualiser qu'après avoir cliqué sur le bouton revéler
  • Lorsque l'utilisateur clique sur le boutton revéler, il est remplacé par une serie de bouton : J'ai trouvé , j'y étais presque, Je ne savais pas permettant à l'utilisateur de s'auto évaluer
  • Lorsque l'utilisateur répond à une carte le poids de cette carte sera changé en fonction de sa réponse (cfr issue)

Scénario

  • Lorsque l'utilisateur ne choisi pas le nombre de carte, il ne pourra pas accéder au jeu contenant le deck
  • Lorsque l'utilisateur sort de la page de jeu sans avoir terminer son deck, ses réponses aux cartes sont prise en compte mais il ne pourra plus acceder au deck qu'il avait précedemment

IV. Info Technique

  • L'image dans la carte doit être adaptatif c'est à dire qu'elle doit toujours se réduire en fonction de la taille de la carte tout en restant net et visible
  • Lorsque l'utilisateur clique sur le révéler le mot sur la carte est remplacé par sa traduction et la phrase au dessus change en fonction pour mentionner que c'est la bonne réponse qui est affiché
  • L'espace de visualisation de la carte doit être centré sur la page cfr maquette ci-dessous
  • Les cartes récupérer en db se font en fonction d'un système de poids (les cartes ayant un poids plus élévé correspondent à celle dont l'utilisateur à le plus de difficulté et inversement) cfr us

V. Complexité de la US

Sur une echelle de 1 à 5 la US à une valeur de 2 en terme de temps de travail on peut l'estimer à 6h.

IV. Tache Composant la US

  • Créer une carte contenant le mot à traduire 1h
  • Créer un bouton Revéler en dessous de la carte 30min
  • Récupérer le nombre de carte dans la DB que l'utilisateur a choisit précedement 2h
  • Remplacé le mot par sa traduction lorsque l'élève clique sur le bouton révéler 1h
  • Remplacé le bouton Révéler par une série de 03 boutons ( J'ai trouvé , j'y étais presque, Je ne savais pas) lorsqu'on clique sur celui ci 1h30

04. Elève - Décider si j'ai trouvé ou pas une question

Titre

En tant qu'élève, je souhaite pouvoir sélectionner parmi trois choix : j'ai trouvé, j'y suis presque, je ne trouve pas. (flashcards)

Description

Une fois que l'utilisateur a vu la solution, il peut s'auto-évaluer en choisissant parmi ces trois choix (j'y suis presque, j'ai trouvé, je ne trouve pas). Cela permettra donc d'influencer le taux d'apparition de la flashcard. Si il a bien répondu, elle ne reviendra plus, si il ne trouve pas, elle devra réapparaitre.

Complexité:

La US a une complexité de 1 sur 5

Valeur d'importance

Cette US est intéressant car il va permettre à l'utilisateur de s'auto évaluer pour pouvoir indiquer s'il avait la réponse en tête, s'il était presque ou s'il n'a pas trouvé.

Critères d'acceptation

  • Quand l'utilisateur veut savoir la réponse de sa carte , il ne sera pas possible de le voir sans avoir pas clique sur la carte
  • Une fois quand il aura cliqué sur la carte, la réponse s'affichera sur l'écran de l'utilisateur où il sera capable de s'auto évaluer

Tâches composant User Story

  • Créer un bouton qui valide la réponse si l'élève avait bien la réponse
  • Créer autre bouton qui dit que l'élève était presque
  • Créer le dernier bouton qui dit que l'élève n'a pas trouvé le mot

Maquette

Image

Professeur - Filtrer mes classes

I.Titre

En tant que professeur, je souhaite pouvoir filtrer mes classes par année afin d'avoir un accès directe à mes différentes classes.

08. Elève - Afficher et stocker le résultat du jeu actuel

Titre

En tant qu'élève, je veux être informé du résultat de ma partie afin de connaitre mon score.

Description

À la fin d'une partie de jeu l'utilisateur devrait être informé de son résultat à celle-ci. Un pop-up devrait s'ouvrir avec le résultat.

Maquette

Image

Critère d'acceptation

Une fois qu'il n'y a plus de carte, l'utilisateur devrait avoir une fenêtre modale lui indiquant son résultat à la partie en question.

Info technique

  • Récupérer les informations actuelles du jeu à partir du Store pour calculer le résultat.

Tâche

  • Récuperer les données de la partie courante
  • Faire la somme des points
  • Afficher le résultat

Complexité

2 sur 5

10. Créateur - Crée des FlashCards à l'aide d'un formulaire

Titre

En tant que créateur, je veux créer des Flashcards à l'aide d'un formulaire.

Description

Avoir un formulaire me permettant de donner le mot et sa traduction et en plus une image liée à celui-ci. Dès que le formulaire est soumis, ces données devront être envoyées à notre back-end. Le mot, sa traduction et l'URL de l'image seront stockés dans la BDD. L'image en elle-même est stockée dans le dossier images (dossier "/upload") prévu à cet effet.

Maquettes

Image

Image

Critère d'acceptation

  • Une page "createFlashCard"
  • Un formulaire avec 2 champs texte : l'un pour le mot et l'autre pour sa traduction
  • Une zone dans le formulaire pour insérer l'image.
  • Un bouton de soumission du formulaire.
  • À la soumission, les données doivent être envoyées à notre back-end pour être traitées et stockées dans la BDD.
  • Une nouvelle ligne devrait être créée dans la table "Flashcard" qui contient le mot, sa traduction et l'URL de l'image. L'image, elle, est stockée dans le serveur et précisément dans le dossier "/upload".

Info technique

L'API devrait être prête pour recevoir les données qui vont transiter du front vers le back.

Tâche

  • Créer la page "createFlashcard"
  • Créer le formulaire
  • Faire un POST sur l'API du Back-end
  • Enregistrer les données dans la BDD et au serveur

Complexité

4 sur 5

Elève - Ecouter l'enregistrement audio des cartes

Titre

En tant qu'élève, je souhaite avoir la possibilité d'écouter l'enregistrement audio des cartes afin d'avoir une bonne prononciation du mot.

Description

Critère d'acceptation

Info technique

Tâche

Complexité

3 sur 5

18. Utilisateur- Connexion de l'utilisateur

Titre

En tant qu'utilisateur, je souhaite pouvoir me connecter à un compte que j'ai préalablement créé afin d'avoir accès à. de nouvelle fonctionnalités.

Description

Une page permet à un utilisateur de se connecter en fournissant un espace pour préciser l'adresse mail et le mot de passe du compte. Les données rentrées par l'utilisateur sont contrôlées et envoyées au back-end pour vérifier si le mot de passe et le mail sont corrects.

Critère d'acceptation

  • Une page de connexion est accessible à n'importe quel l'utilisateur
  • Cette page contient un formulaire qui permet de préciser un mail et un mot de passe
  • Un bouton 'se connecter' est également présent pour permettre à l'utilisateur d'envoyer ses données de connexions pour être vérifiées.
  • Si le mail n'existe pas ou que le mot de passe est incorrect, un message d'erreur est visible par l'utilisateur.
  • Si la connexion est un succès, l'utilisateur est redirigé vers la page d'acceuil du site.
  • Une fois la connexion effectuée, les données relatives à l'utilisateur sont stockées et peuvent être accédées partout dans l'application.

Info technique

La base de données doit contenir les tables nécessaires à la connexion d'un utilisateur.

Une route dois permettre d'envoyer les données rentrées par l'utilisateur vers le backend pour vérification (/login par ex.).

Si la connexion est réussie, le backend renvoi un objet avec les informations sur le compte. Voici une liste de ces dernières:

  • Nom de l'utilisateur
  • Prénom de l'utilisateur
  • Rôle de l'utilisateur
  • Classe de l'utilisateur
  • Id de l'utilisateur

Il doit y avoir une vérification des champs dans le formulaire. Par exemple si l'utilisateur clique sur le bouton 'se connecter' mais que aucune données n'ont été fournies.

Tâches techniques:

  1. Créer la page de connexion selon la maquette (Michaël):

Image

  1. Préparation de la DB (Brice)

  2. Encodage du user admin dans la DB (Brice)

Étapes de réalisation:

  1. Faire en sorte que les valeurs des champs soient vérifiées quand on clique sur le bouton 'se connecter' (Aymar
  2. Création de la route dans l'API (Brice)
  3. Créer une route pour envoyer les données vers le backend avec Axios (Aymar)
  4. Stocker les données reçues après la connexion dans le localStorage (Aymar)
  5. Renvoyer l'utilisateur sur la page d'acceuil (Aymar)

Complexité

4 sur 5

9. Elève - Choisir ma langue d'apprentissage

Titre

En tant qu’élève, je souhaite pouvoir choisir ma/mes langues d’apprentissage parmi un choix donné afin de m’authentifier.

Description

Critère d'acceptation

Info technique

Tâche

Complexité

Elève - Modifier mon profil

Titre

En tant qu'étudiant, je veux pouvoir modifier les éléments de mon profil afin de pouvoir mettre à jour mes informations.

Description

Critère d'acceptation

Info technique

Tâche

Complexité

3 sur 5

26. Créateur - Crée des FlashCards à l'aide d'un fichier .XLSX

Titre

En tant que créateur, je veux créer des activités sur la carte afin de proposer des nouvelles activités.

Description

Dans la page"addCard", dans la partie centrale, on affiche un formulaire pérmettant d'importer un fichier XLSX (Excel), une fois qu'il a été importé, les données de celui-ci devront-être utilisées pour créer les différentes cartes, (une ligne = une carte). Celles-ci seront stockées dans une BDD. Le créateur devrait suivre la convention suivante : la 1ère colonne étant réservé pour le mot et la seconde pour sa traduction.

  • Le fichier sélectionné doit porter l'extension « .xlsx » afin d'être autorisé.
  • L'utilisateur devrait avoir un compte "créateur" pour accéder à cette page.

Maquette

Image01

Critère d'acceptation

Lorsque je suis connecté et je dispose du rôle "créateur", dans la page "addCard", je dois être en mesure d'importer un fichier XLSX en utilisant un formulaire et avoir un pop-up me disant l'importation correcte de celui-ci ou l'erreur dans le cas échéant.
Si je n'envoie qu'aucun fichier, rien se passe.

Info technique

Tâche

  • Création d'une nouvelle page pour l'ajout des activités. Cette page inclura un formulaire permettant d'importer le fichier XLSX.
  • Une fois le fichier importé, vérifiez qu'il contient les données attendues.
  • Si les données ne correspondent pas afficher une boîte de dialogue avec le message d'erreurs.
  • Crée un point de terminaison en backend afin d'envoyer ce fichier à l'aide de la méthode "POST".
  • Afficher une boîte de dialogue indiquant que les données du fichier a bien été importées et qu'elles se trouvent dans la BDD.

Complexité

Sur une échelle de 1 à 5 (5 étant le plus complexe et 1 inversement) :
4, car celle-ci utilise un endpoint, elle traite aussi les données provenant de fichiers Excel importés afin de créer les questions.

Importance

Sur une échelle de 1 à 5 (5 étant la valeur la plus importantes et 1 la moins), cette US est classée en 3 (+- importante) car s'il n'y a pas de question dans la BDD, le créateur ne poura pas en créer des nouveaux.

API

POST: /card/upload/

Créateur - Ajouter un enregistrement audio aux cartes

Titre

En tant que créateur, je souhaite pouvoir ajouter un enregistrement audio aux cartes.(flashcards) afin de permettre à l'élève d'avoir un bonne prononciation du mot dans la langue d'aprentissage

Description

Critère d'acceptation

Info technique

Tâche

Complexité

3 sur 5

21. Elève - Gagner des objets/monnaie

Titre

En tant qu'utilisateur, je veux gagner des objets/monnaie lorsque j'ai répondu correctement à une partie afin de débloquer des nouvelles activités.

Description

Critère d'acceptation

Info technique

Tâche

Complexité

3 sur 5

05. Elève - Afficher le nombres de cartes restantes lors du jeu

Titre

En tant qu'éleve, je souhaite d'être informé du nombre de cartes restantes lors du jeu.

Description

Lorsqu'un élève est entrain de jouer, dans la partie centrale à gauche, il devrait être informé du nombre de carte réstante. Lorsqu'il clique sur un des boutton : "J'ai trouvé", "J'y étais presque" ou "Je ne savais pas", ce nombre devrait être décrémenté. Lorsque le nombre de carte est inférieur à 8, un effet de disparition des cartes devrait apparaitre. Une fois que le nombre de cartes est terminé ce composant devrait être supprimé et faire appel à une fenêtre contextuelle pour afficher le résultat du jeu.

Maquette

Maquette01

Critère d'acceptation

  • Afficher le nombre de carte restantes dans la partie courante.

Info technique

Création et récupération du nombre de carte depuis le store.

Tâche

  • Créer le composant "remainingCards"
  • Récupérer du Store la variable qui contient le nombre de carte.
  • Afficher celle-ci et créer un effet avec des cartes dérrière.
  • Si inférieur à 8, faire disparaitre les cartes une à la fois.
  • Si il n'y a plus de carte, ne pas afficher le composant et faire appel au composant qui affiche le résultat.

Complexité

2 sur 5 -> (presque que du CSS)

22. Élève - Visualiser les informations de mon profil

Élève - En tant qu'élève je souhaite visualiser les informations de mon profil

Description

L'élève aura accès à une page nommée "profil" où il pourra voir ses informations de profil (prénom, nom, ...). Il pourra aussi visualiser sa classe et les succès qu'il a déverrouillés. Il y aura aussi un bouton "log out" pour que l'utilisateur puisse se déconnecter.

Critère d'acceptation

  • En arrivant sur la page, l'utilisateur doit visualiser les information de son profil (prénom, nom, ...) (le composant profil est renvoyé).
  • Il y aura 4 boutons sur la page: Profil, Classe, Succès, Log out.
  • En cliquant sur le bouton classe, le composant classe est renvoyé.
  • En cliquant sur le bouton Succès, le composant succès est renvoyé.
  • En cliquant sur le bouton log out, un popup lui demande de confirmer si il veut se déconnecter. Si il répond "oui", il sera déconnecter de son compte.

Info technique

Prérequis:

L'élève doit posséder un compte et être connecté.

Impact sur la db:

Lecture sur la db (GET)

Tâche

  • Les composants ont déjà été créé.
  • Routes GET à implémenter afin d'accéder aux infos
  • Créer la page avec les boutons
  • Faire en sorte que chaque bouton renvoi le bon composant.
  • Faire en sorte que le bouton log out renvoi un popup et que, si l'utilisateur le confirme, il provoque la déconnexion de l'utilisateur.

Complexité

3/5

20. Elève - je souhaite que mes réponses soit enregistrés pour chaque carte et prise en compte pour le calcul des poids (Flashcards)


HE201916 (Ikram)

Titre

Je souhaite que mes réponses soit enregistrés pour chaque carte et prise en compte pour le calcul des poids (Flashcards)

Description

Les réponses de l’élève au jeu de Flashcard seront envoyées vers le backend et enregistrées dans la DB pour le calcul des poids (cf US perso #22)

Critères d'acceptation

Lorsqu'un élève termine un jeu, ses réponses sont sauvegardés dans la DB

Dépendances techniques

Prérequis : les cartes sont déjà envoyées vers l'utilisateur

Impact sur la DB

Accès en lecture et écriture sur la DB : écriture des réponses dans la table user_response

Découpage en tâches

Ajout du endpoint /user_response/iduser/:cards
Implémentation d'une fonction qui permet de mettre à jour la table user_response

Complexité:

3 sur 5

28. Élève, accéder à une zone eloignée de la carte intérative pour jouer (DragAndDrop)

Titre

En tant qu'élève, je souhaite pouvoir accéder à la page du jeu dragAndLearn afin de pouvoir lancer une partie.

Description

Afin de pouvoir lancer une partie, l'utilisateur doit avoir un accès aux jeux. Pour cela il faut qu'il puisse depuis la page d'acceuil trouver une page lui permettant de lancer une partie de DragAndLearn. Il pourra lancer une partie depuis la carte intéractive en choisissant son monde de jeu (Flashcard ou DragAndLearn).

Critère d'acceptation

  • Un accès à la carte intéractive est disponible depuis la page d'acceuil
  • En cliquant sur un point de la carte, un pop up avec les information de la partie apparait.
  • Dans ce popup, l'utilisateur a la possibilité de choisir son mode de jeu (Flashcard ou DragAndLearn)
  • Si il choisi le mode de jeu 'DragAndLearn', il a la possibilité de lancer la partie en cliquant sur le bouton "JOUER".

Info technique

Dépendance => La carte intéractive doit être opérationnnelle.

Tâche

  • Créer une nouvelle page pour le jeu de dragAndDrop si ce n'est pas déjà fais.
  • Créer une route pour pouvoir accéder à cette page
  • Dans la carte intéractive, améliorer le popup pour qu'il puisse montrer les deux modes de jeux différents.
  • Créer une partie dans le popup avec les infos sur le mode de jeu et avec un bouton pour lancer une partie qui mène à la page via la nouvelle route.

Complexité

2 sur 5

06. Elève - Revoir les cartes ratées dans mon deck

Titre

En tant qu'élève, je souhaite revoir les cartes que je n'ai pas trouvé dans mon deck actuel afin de vérifiez si j'ai assimiler la réponse.

Description

Si l'utilisateur a trouver la bonne réponse (qu'il a donc répondu "j'ai trouvé"), la carte est donc retiré du deck et il ne pourra plus retomber dessus lors de cette partie. Si il n'a pas trouvé la bonne réponse, la carte reste dans le deck

Critère d'acceptation

  • Si l'utilisateur à cliqué sur "je n'ai pas trouvé" après avoir vu la réponse, la carte doit réapparaitre dans le deck.
  • Le nombre de carte restantes dans le deck doit donc resté le même (et ne pas diminuer).
  • La carte doit être rejouer lors de la partie.
  • La carte doit être remise aléatoirement dans le deck (on ne sait pas quand elle réapparaitra dans la partie).

Info technique

Tâche

  • Le bouton "je n'ai pas trouvé" a déjà été créé précédemment, il faudra donc faire en sorte que le clique sur ce bouton fasse revenir la carte dans le deck.
  • Il faut remettre la carte dans le deck aléatoirement.

Complexité

4 sur 5

Déplacer mon avatar

Titre

En tant qu’utilisateur, je souhaite déplacer mon avatar sur une carte interactive afin d’accéder à une activité spécifique.

Elève - Choisir mon domaine

Titre

En tant qu’élève, je souhaite pouvoir choisir le domaine qui me passionne lors de l'inscription afin pouvoir avoir des activités en relation avec celle ci.

23. Elève - Consulter mes accomplissements dans mon profil

TITRE : Consulter mes accomplissements

En tant qu'élève connecté, je souhaite pouvoir consulter mes accomplissements et avancées ainsi que ma liste de vocabulaire afin de visualiser mon niveau actuel.

REGLE METIER

Lorsque l'étudiant se connecte, tout en haut a droite il peut cliquer sur un bouton permettant de le renvoyer vers son profil. il verra donc un bouton '' historique '' permettant de consulter l'ensemble des activités auxquelles il a participé et ses différents résultats.

Critère d'acceptation

ETANT DONNEE que je souhaite consulter mes accomplissements
QUAND je clique sur le mon profil tout en haut a droite
ALORS j'accède a mon profil
ET je clique sur le bouton '' Historique''
ET je peux avoir l'ensemble des activités auxquelles j'ai participées et mes différents résultats sur ces derniers

sous taches

  • Mise en place de la page d'accueil
  • Mise en place de la base de données
  • Création du web service permettant de récupérer les activités et les résultats
  • Affichage des données sur l'espace utilisateur

temps estimé

3h- 4h

Difficulté

⭐⭐⭐

01. Elève - Choisir le nombre de carte à jouer

Titre

En tant qu'élève, je souhaite pouvoir choisir le nombre de carte afin de définir la durée de la partie (flashcards).

Description

Après avoir choisis le nombre de carte qu'il voulait jouer, l'élève disposera d'un deck de flashcards du même nombre de cartes, ces cartes seront choisis aléatoirement par une requête sur la base de donnée.

Critère d'acceptation

  • Une interface permet à l'utilisateur de sélectionner le nombre de carte qu'il souhaite avoir dans son deck au début de la partie.
  • L'utilisateur pourra choisir entre 3 possibilité: 20, 10 et 5.
  • Ce nombre est stocké pour être utilisé lors du jeu.

Info technique

La page doit être responsive. Le nombre de carte doit être enregistré et stocké d'une manière à ce qu'il soit utilisable par les autres pages/composants (store).

Tâche

  • Créer une nouvelle page
  • Y indiquer les 3 choix sous forme de cartes (20 cartes, 10 cartes ou 5 cartes).
  • Pour chaque div (qui sont donc sous forme de carte), créer un bouton qui mène sur la page de début du jeu.
  • Au click du bouton stocker le nombre de carte choisi dans le store.

Image

Complexité

3 sur 5

16. Professeur - Inscription de l'élève dans sa classe via un fichier excel

Title

En tant que professeur, je souhaite inscrire une liste d'élève dans des classes via un fichier excel afin de les répartir dans différentes salles de classes

Valeur d'importance

Sur une echelle de 1 à 5 :
Cette US a une importance de 3 car il va permettre au professeur de mettre facilement d'élève dans sa classe qui lui est dédié

Description

Critère d'acceptation

Tâches composant User Story

Dépendances techniques

End point du US

30. Élève, pouvoir obtenir mon score après avoir placé tous les mots(DragAndDrop)

Titre

En tant qu'élève, je souhaite obtenir mon score afin de savoir combien de mots on été bien placés.

Description

En tant qu'élève et joueur, je souhaite pouvoir avoir la possibilité de visualiser mon score après avoir placé tous les mots dans les cases. Pour cela un espace est réservé à la vérification du score avec un bouton pour me permettre de le mettre à jour.

Critère d'acceptation

  • Lorsque l'utilisateur lance la partie, il voit une zone luis permettant d'afficher son score
  • Dans cette zone, il doit avoir à sa disposition un bouton lui permettant d'actualiser son score.
  • L'information de score sera du format suivant => {nombre de cases correctes} / {nombre de cases total}

Info technique

Dépendance => La zone de jeu et la zone de mots doivent êtres fonctionnelles (voir US: Élève, pouvoir drag and drop les mots dans les cases#56)

Tâche

  • Créer une zone pour le scoring
  • Dans la zone de scoring, un affichage du score est visible selon le format => {nombre de cases correctes} / {nombre de cases total}
  • Dans la zone de scoring, un bouton permet, une fois cliqué, d'actualiser le score
  • Quand le bouton est cliqué, il parcour tous les champs et les valides si le mot qui y est placé est correct

Complexité

3 sur 5

17. Professeur - Inscrire un élève via un formulaire

Titre

En tant que professeur je souhaite pouvoir créer un compte élève afin qu'il ait accès accès à plus de fonctionnalités

Description

Une page permet à un utilisateur de créer un nouveau compte grâce à un formulaire. Une fois le compte créé, l'utilisateur pourra s'y connecter pour avoir accès a de nombreuses nouvelles fonctionnalités.

Critères d'acceptations:

  • Cette page contient un formulaire qui permet à l'utilisateur d'entrer les informations du nouveau compte.
  • Le formulaire est découpé en deux partie: Une partie pour préciser le nom, prénom, email et mot de passe. Et une partie pour donner le numéro de téléphone, la date de naissance de l'utilisateur et son sexe.
  • Si un des champs n'est pas validé, un message d'erreur apparait.

Critères de non-validité interne au formulaire:

  • Un champ vide n'est pas valide.
  • Un champ mail ne comportant pas un mail au bon format n'est pas valide.
  • Un champ mot de passe qui comporte un mot de passe de moins de 12 caractères n'est pas valide.
  • Un champ mot de passe qui comporte un mot de passe sans chiffre n'est pas valide.
  • Un champ mot de passe qui comporte un mot de passe sans minimum 1 caractère spécial n'est pas valide.
  • Un champ mot de passe et confirmer le mot de passe contenants 2 mots de passe différents ne sont pas valides.
  • Un champ numéro de téléphone n'est pas valide si le numéro n'a pas le bon format.
  • Un champ de date de naissance n'est pas valide si la date est dans le futur.

Critères de non-validité externe au formulaire:

  • Un champ mail n'est pas valide si le mail est déjà utilisé par un autre compte.

  • Un champ numéro de téléphone n'est pas valide si le numéro précisé est déjà utilisé par un autre compte.

  • Si tout les champs sont valides, les informations du nouveau compte peuvent être envoyées au backend via une route (/register par ex).

  • Une fois le compte créé, l'utilisateur est amené à la page de connexion.

Infos techniques:

Une route dois permettre d'envoyer les données rentrées par l'utilisateur vers le backend (/register par ex.).

La base de données doit contenir les tables nécessaires à l'enregistrement d'un utilisateur.

Tâches:

  1. Créer la page d'inscription selon la maquette:

Image

Image

  1. Faire en sorte que les valeurs de champs soient vérifiées comme indiqué dans les critères d'acceptation.
  2. Créer une route pour envoyer les données vers le backend.
  3. Envoyer l'utilisateur vers la page de connexion si l'inscription est un succès.

Complexité

3 sur 5

Professeur - Inscription de l'élève dans sa classe

Title

En tant que professeur, je souhaite inscrire et désinscrire un élève d’une classe afin de les répartir dans différentes salles de classe.

Valeur d'importance

Sur une echelle de 1 à 5 :
Cette US a une importance de 3 car il va permettre au professeur de mettre facilement d'élève dans sa classe qui lui est dédié

Description

Quand l'élève aura terminé de créer son compte et qu'il est dans la liste de tout les personnes inscris, il sera mis dans sa salle qui a été choisie par son professeur

Critère d'acceptation

Tâches composant User Story

Dépendances techniques

End point du US

29. Élève, pouvoir drag and drop les mots dans les cases(DragAndDrop)

Titre

En tant qu'élève, afin de pouvoir jouer au jeu, je souhaite pouvoir bouger les mots et les positionners dans des cases.

Description

Une fois la partie lancée et donc que l'utilisateur est sur la page du jeu de DragAndLearn, il devra avoir à sa disposition une zone avec des mots qu'il peut placer dans une zone de jeu. Dans cette zone de jeu, les mots devrons être placés dans des champs. Afin de ne pas trop facilité la tâche du joueur, à chaque partie, les mots devrons être dans un ordre différent dans la zone de mots. La zone de champs comportera une image de background (formulaire, cv, etc).

Critère d'acceptation

  • Lorsque l'utilisateur lance la partie, il voit une zone avec des mots et une zone de jeu avec des champs.
  • Ces mots sont draggable and droppable.
  • Ces mots ne sont déposable que dans des champs qui se trouvent dans la zone de jeu.
  • Si un mot n'est pas droppé dans un champ il reviens dans la zone des mots disponibles.
  • Maximum un mot pourrra être dans un champ à la fois.

Info technique

Dépendance => Une route doit être disponible pour accéder à la page du jeu (Voir US: Élève, accéder à la page pour jouer#55)

Tâche

  • Créer une zone pour l'espace de jeu
  • Créer une zone pour l'espace des mots
  • Générer les mots de la zone de mots à partir d'une liste ou d'un objet
  • Rendre les mots draggable et droppable
  • Créer des champs sur la zone de jeu à partir d'une liste ou d'un objet
  • Permettre au champ d'acceuillir les mots
  • Faire en sorte qu'il n'y que 1 seul mot max par champ
  • Faire en sorte qu'un mot qui n'est pas drop dans un champ soit remis dans la liste des mots
  • Faire en sorte que les mots dans la liste des mots soient dans un ordre aléatoires
  • ⚠ L'espcae de jeu doit faire la taille de l'image

Complexité

4 sur 5

12. Créateur - Ajouter une image aux Flashcards

Titre

En tant que créateur, je souhaite avoir la possibilité d'ajouter des images aux cartes afin qu'elle soit plus visuelle pour les élèves

Description

Critère d'acceptation

Info technique

Tâche

Complexité

2 sur 5

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.