Crée une application HTML monopage, stylée avec Tailwind CSS et la police Inter, pour réviser le prétérit simple anglais (Past Simple).
Contenu et Fonctionnalités Clés :
Titre : Affiche "The Past Simple".
Introduction : Inclut un court texte expliquant comment utiliser l'outil.
Sélection Verbe :
Utilise un menu déroulant.
Groupe des verbes réguliers et irréguliers courants (comme play, watch, go, eat, have, see...).
Affiche les verbes dans la liste sous la forme "to [verbe]" (ex: "to play").
Tableau de Conjugaison :
Colonnes : Subject, Affirmative (+), Negative (-), Interrogative (?).
Sujets : I, You, He / She / It, We, They.
Important : Garde le pronom "I" en majuscule dans la colonne interrogative.
Inclut des exemples simples en fin de phrase.
Boutons Hide/Show :
Ajoute des paires de boutons (texte en anglais) pour masquer/afficher la forme passée, l'auxiliaire (did/didn't/Did), et la base verbale.
Organise les boutons dans l'ordre : Passé, Auxiliaire, Base.
Style et Apparence (avec Tailwind CSS) :
Couleurs Distinctes : Utilise des couleurs claires et distinctes pour le sujet, la forme passée, l'auxiliaire et la base verbale dans le tableau (par exemple : bleu pour le sujet, rouge pour le passé, orange pour l'auxiliaire, vert pour la base).
Couleurs des Boutons : Fais correspondre la couleur de fond des boutons Hide/Show à la couleur de l'élément qu'ils contrôlent. Ajoute un effet visuel simple au survol (hover).
Espacement : Assure un espacement clair et lisible entre les mots dans le tableau. L'espacement entre le sujet et le verbe dans la colonne affirmative doit être visiblement plus réduit que les espacements dans les autres colonnes.
Apparence Générale : Donne à l'application une apparence moderne et soignée en utilisant Tailwind (coins arrondis, ombres légères, bon padding). Assure la responsivité.
Code Final :
Génère un fichier HTML unique et complet, bien commenté, incluant le CSS Tailwind et le JavaScript nécessaires.
Crée une application HTML monopage pour s'entraîner au Present Perfect en anglais. Utilise la police 'Inter' (importée depuis Google Fonts) et du CSS personnalisé pour le style.
Fonctionnalités Requises :
Titre : Affiche le titre principal "Present Perfect Practice".
Entrées Utilisateur : Inclure trois menus déroulants avec des labels clairs pour choisir :
Un verbe (inclure 'to be', 'to have', 'to go', 'to eat', 'to study', 'to work', 'to use').
Un pronom (I, You, He, She, It, We, They).
Un mode (Affirmative, Negative (Long), Negative (Short), Interrogative).
Génération de Phrase :
Construire la phrase correcte au Present Perfect selon les sélections (gérer 'have'/'has', négations longue/courte, interrogations, capitalisation de 'I' et début de phrase, ponctuation).
Utiliser les participes passés corrects (been, had, gone, etc.).
Affichage de Phrase : Afficher la phrase générée dans une zone dédiée. Permettre de styler et masquer des parties distinctes (sujet, auxiliaire, négation, participe).
Fonctionnalité Masquer/Afficher :
Ajouter des boutons (texte en minuscules : "hide subject", "hide auxiliary", "hide participle") pour masquer/afficher individuellement le Sujet, l'Auxiliaire (incluant la négation), et le Participe Passé.
Utiliser '...' comme placeholder quand une partie est masquée.
Indiquer visuellement si un bouton est actif (partie masquée).
Prononciation :
Ajouter un bouton "pronunciation".
Utiliser l'API Web Speech pour lire la phrase complète non masquée (voix UK anglais, rythme un peu ralenti).
Style (CSS Personnalisé) :
Général : Police 'Inter'. Centrer le contenu. Fond de page gris clair.
Conteneur Principal : Fond blanc, padding, coins arrondis, ombre portée, largeur raisonnable.
Titre : Centré, texte foncé, taille/graisse appropriées.
Formulaires : Labels clairs. Menus déroulants bien stylés (padding, bordures, flèche personnalisée, style de focus).
Couleurs dans la Phrase : Appliquer des couleurs distinctes et du gras pour l'Auxiliaire (vert), la Négation (rouge), et le Participe Passé (bleu).
Boutons :
Texte en minuscules.
Appliquer des styles de fond/bordure/texte différents pour les boutons "hide auxiliary" (tons verts clairs) et "hide participle" (tons bleus clairs) par rapport aux boutons "hide subject" et "pronunciation" (tons neutres/blancs).
Ajouter un style visuel distinct quand un bouton "hide..." est actif (partie masquée).
Inclure des effets de survol et de clic subtils.
Zone d'Affichage : Mettre en évidence la zone d'affichage de la phrase (ex: fond très clair, bordure, padding, texte centré, taille de police lisible).
Code Final :
Générer un fichier HTML unique et complet avec HTML, CSS personnalisé, et JavaScript.
Le JavaScript doit gérer toute la logique.
Initialiser l'application avec l'auxiliaire et le participe masqués.
Le code doit être bien structuré et commenté.
Crée un exercice interactif en HTML, CSS (Tailwind), et JavaScript pour aider des élèves à pratiquer le Past Simple en anglais. L'exercice doit pouvoir être intégré facilement dans un Google Site.
Fonctionnalités Principales :
Présenter 10 phrases à trous sélectionnées aléatoirement depuis une réserve plus large.
Inclure un mélange de phrases affirmatives, négatives, et interrogatives.
Utiliser principalement du vocabulaire tiré du fichier PDF fourni (Unités 6 & 7).
Niveaux de Difficulté :
Implémenter 3 niveaux de difficulté (Niveau 1 : Verbes réguliers, phrases simples ; Niveau 2 : Verbes irréguliers courants, phrases plus longues ; Niveau 3 : Verbes irréguliers moins courants, phrases complexes).
Prévoir une réserve d'au moins 50 phrases uniques par niveau (l'implémentation peut utiliser un échantillon représentatif plus petit).
Afficher clairement le niveau de difficulté actuel à l'utilisateur.
Faire progresser automatiquement l'utilisateur au niveau suivant s'il obtient un score de 8/10 ou plus (jusqu'au niveau maximum).
Structure des Phrases & Saisie :
Affirmatives : Un seul espace vide pour le verbe au Past Simple. Exemple : She ___ (study) English. -> l'élève saisit studied.
Négatives : Fournir un contexte suggérant la négation et un seul espace vide attendant didn't + base verbale. Exemple : The weather was bad, so we ___ (not want) to go out. -> l'élève saisit didn't want.
Interrogatives : Fournir deux espaces vides séparés : le premier pour l'auxiliaire Did, le second pour la base verbale. Exemple : ___ you ___ (visit) your grandparents? -> l'élève saisit Did dans le premier espace et visit dans le second.
Interface Utilisateur & Fonctionnalités (Anglais Niveau A2 Max) :
Afficher des instructions claires en anglais simple (niveau A2).
Inclure un bouton 'Check Answers'. Au clic :
Désactiver les champs de saisie.
Marquer chaque champ (ou partie de phrase) comme correct/incorrect.
Afficher la ou les réponses correctes à côté de la phrase si l'élève s'est trompé.
Montrer le score global (ex: "Your score: 8 / 10").
Fournir des messages de feedback simples en anglais (ex: "Well done!", "Keep practicing!", "Excellent!").
Inclure un bouton 'New Sentences' pour charger 10 nouvelles phrases aléatoires du niveau actuel.
Assurer une interface claire, conviviale et visuellement agréable en utilisant Tailwind CSS.