LIS-MOI D'ABORD :
Pour les invites 2 à 4, l'IA va générer une longue chaîne de code "HTML".
Vous devez copier l'intégralité du texte de l'invite, du haut jusqu'en bas, dans chaque section ci-dessous pour que cela fonctionne correctement.
Il vous suffit de copier-coller le code dans Notepad (Windows) ou TextEdit (Mac) et d'enregistrer le fichier sous le nom Quelque_Nom.html
Vous devez absolument ajouter .html à la fin du nom du fichier. Ne laissez pas l'extension .txt ou .doc s'ajouter automatiquement, sinon cela ne fonctionnera pas.
Double-cliquez sur le fichier que vous venez d’enregistrer et il s’ouvrira dans votre navigateur web. Vous pouvez ensuite l’envoyer à l’apprenant, qui pourra l’ouvrir en double-cliquant dessus. Facile !
P.S. Si vous voulez une façon plus simple de procéder, inscrivez-vous au programme de Beta Test LearnBook AI. Toutes ces invites (et bien d'autres à venir) seront disponibles sans avoir besoin de copier-coller ou d'utiliser ChatGPT et autres outils.
Inscrivez-vous ici : https://forms.gle/HXGqJFhgFCCE4SXk6. 🚀
Veuillez créer une activité en classe pour mes apprenants de niveau {{niveau de langue}} en {{langue cible}}. L’activité doit être axée sur le développement de leur capacité à {{compétence ciblée}} dans le contexte de {{thème ou sujet spécifique}}. Elle doit être adaptée à un cours de {{durée du cours}} minutes et conçue pour un groupe de {{nombre d’apprenants}} étudiants. Les apprenants sont {{profil des apprenants, par ex. jeunes adultes, professionnels, etc.}}.
L’activité doit inclure {{type d’éléments interactifs, par ex. travail en binôme, discussions de groupe, jeux de rôle, etc.}} et intégrer {{matériaux ou outils spécifiques, par ex. cartes mémoire, vidéos, etc.}}. L’objectif est de permettre aux apprenants de {{objectif fonctionnel}} à la fin de l’activité.
De plus, l’activité doit prendre en compte {{intérêts ou besoins spécifiques, par ex. timidité des apprenants, passion pour le vin, etc.}}.
Veuillez fournir des instructions claires pour la mise en place, l’exécution et l’évaluation de l’activité. Vous devez diviser votre réponse en deux parties :
En utilisant le modèle HTML suivant, remplacez les mots par {{ nombre de mots }} mots en rapport avec {{ sujet ou liste de mots }}.
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Business Meeting Vocabulary Gapfill Game</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#well-done {
display: none;
padding: 10px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
margin-bottom: 20px;
text-align: center;
font-size: 1.5em;
}
.gap {
width: 150px;
padding: 5px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 3px;
transition: background-color 0.3s;
}
.correct {
background-color: #c8e6c9 !important;
}
.incorrect {
background-color: #ffcdd2 !important;
}
#word-list ul {
list-style-type: none;
padding: 0;
}
#word-list li {
display: inline-block;
margin-right: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="well-done">Well done!</div>
<div id="word-list" style="margin-bottom:20px;">
<p>Missing words:</p>
<ul>
<li>welcome</li>
<li>agenda</li>
<li>chair</li>
<li>minutes</li>
<li>open</li>
<li>propose</li>
<li>agree</li>
<li>disagree</li>
<li>close</li>
<li>adjourn</li>
</ul>
</div>
<p>
1. Before the meeting begins, please
<input type="text" class="gap" data-answer="welcome">
our distinguished guests.
</p>
<p>
2. The
<input type="text" class="gap" data-answer="agenda">
for today's meeting is posted on the bulletin board.
</p>
<p>
3. The
<input type="text" class="gap" data-answer="chair">
will now call the meeting to order and outline the objectives.
</p>
<p>
4. Please ensure that the
<input type="text" class="gap" data-answer="minutes">
are recorded accurately for future reference.
</p>
<p>
5. To start off, I will
<input type="text" class="gap" data-answer="open">
the meeting by introducing the key topics.
</p>
<p>
6. I would like to
<input type="text" class="gap" data-answer="propose">
a new proposal that could boost our quarterly revenue.
</p>
<p>
7. Most of the team members
<input type="text" class="gap" data-answer="agree">
with the suggested approach after careful consideration.
</p>
<p>
8. However, a few participants
<input type="text" class="gap" data-answer="disagree">
with the plan, raising concerns about its feasibility.
</p>
<p>
9. We will
<input type="text" class="gap" data-answer="close">
the meeting with a summary of the decisions made today.
</p>
<p>
10. After all discussions, the moderator will formally
<input type="text" class="gap" data-answer="adjourn">
the meeting.
</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
const inputs = document.querySelectorAll("input.gap");
// Function to check if all inputs are correct
function checkAll() {
let allCorrect = true;
inputs.forEach(function(input) {
const expected = input.getAttribute("data-answer").toLowerCase();
if (input.value.trim().toLowerCase() !== expected) {
allCorrect = false;
}
});
document.getElementById("well-done").style.display = allCorrect ? "block" : "none";
}
// Attach event listeners to each input
inputs.forEach(function(input) {
// On input, check immediately for the correct answer
input.addEventListener("input", function() {
const expected = input.getAttribute("data-answer").toLowerCase();
if (input.value.trim().toLowerCase() === expected) {
input.classList.add("correct");
input.classList.remove("incorrect");
} else {
// Remove the correct styling if the answer is no longer correct.
input.classList.remove("correct");
}
checkAll();
});
// On blur, if the answer is incorrect (and non-empty), mark it red.
input.addEventListener("blur", function() {
const expected = input.getAttribute("data-answer").toLowerCase();
if (input.value.trim().toLowerCase() !== expected && input.value.trim() !== "") {
input.classList.add("incorrect");
}
});
});
});
</script>
</body>
</html>
```
En utilisant le modèle HTML suivant, remplacez les mots par {{ nombre de mots }} mots en rapport avec {{ sujet des mots ou liste de mots }} et leurs définitions. N'incluez pas les mots eux-mêmes dans leurs définitions ; définissez chaque mot sans utiliser le mot.
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Business Meeting Vocabulary Matching Game</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* Message at top */
#message {
display: none;
color: green;
text-align: center;
font-size: 2em;
margin-bottom: 20px;
}
/* Container for the two columns */
.game-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: 20px;
}
.column {
width: 45%;
border: 1px solid #ccc;
padding: 10px;
min-height: 300px;
background-color: #fafafa;
}
.column h2 {
text-align: center;
}
/* Style for draggable words */
.draggable {
border: 1px solid #000;
padding: 8px;
margin: 5px;
background-color: #f0f0f0;
cursor: grab;
}
/* Style for droppable definition boxes */
.droppable {
border: 2px dashed #aaa;
padding: 10px;
margin: 5px;
min-height: 50px;
}
/* Correct match styling */
.correct {
background-color: #c8e6c9 !important; /* light green */
}
/* Incorrect match styling */
.incorrect {
background-color: #ffcdd2 !important; /* light red */
}
</style>
</head>
<body>
<h1 id="message">Well done!</h1>
<div class="game-container">
<!-- Left Column: Words -->
<div class="column" id="left-column">
<h2>Words</h2>
</div>
<!-- Right Column: Definitions (Contextual examples) -->
<div class="column" id="right-column">
<h2>Contextual Examples</h2>
</div>
</div>
<script>
// The 10 vocabulary pairs (each with a unique id)
const pairs = [
{
id: "pair1",
word: "Agenda",
definition: "Please review the meeting agenda to understand the topics we will discuss."
},
{
id: "pair2",
word: "Minutes",
definition: "The secretary is responsible for taking minutes during our business meetings."
},
{
id: "pair3",
word: "Adjourn",
definition: "After all items were discussed, the chair decided to adjourn the meeting."
},
{
id: "pair4",
word: "Consensus",
definition: "We reached a consensus on the new project timeline during the meeting."
},
{
id: "pair5",
word: "Facilitate",
definition: "The manager's role is to facilitate productive discussions among team members."
},
{
id: "pair6",
word: "Clarify",
definition: "Could you clarify your point regarding the budget allocations?"
},
{
id: "pair7",
word: "Postpone",
definition: "Due to conflicting schedules, we may need to postpone the meeting."
},
{
id: "pair8",
word: "Confirm",
definition: "I would like to confirm the meeting time for tomorrow's conference call."
},
{
id: "pair9",
word: "Agree",
definition: "Several members agree that the new strategy will improve our quarterly results."
},
{
id: "pair10",
word: "Disagree",
definition: "Some participants disagree with the proposed changes to the budget."
}
];
// Utility: Shuffle an array in place.
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Create two arrays – one for words and one for definitions – and shuffle each independently.
const leftWords = shuffle([...pairs]);
const rightDefs = shuffle([...pairs]);
// Get container elements
const leftContainer = document.getElementById('left-column');
const rightContainer = document.getElementById('right-column');
const messageEl = document.getElementById('message');
// Create draggable word elements
leftWords.forEach(item => {
let wordDiv = document.createElement('div');
wordDiv.className = 'draggable';
wordDiv.draggable = true;
wordDiv.id = 'word-' + item.id; // e.g., "word-pair1"
wordDiv.textContent = item.word;
wordDiv.dataset.match = item.id;
wordDiv.addEventListener('dragstart', handleDragStart);
leftContainer.appendChild(wordDiv);
});
// Create droppable definition elements
rightDefs.forEach(item => {
let defDiv = document.createElement('div');
defDiv.className = 'droppable';
defDiv.id = 'def-' + item.id; // e.g., "def-pair1"
defDiv.textContent = item.definition;
defDiv.dataset.match = item.id;
defDiv.addEventListener('dragover', handleDragOver);
defDiv.addEventListener('drop', handleDrop);
rightContainer.appendChild(defDiv);
});
// Also allow dragging words back to the left column.
leftContainer.addEventListener('dragover', handleDragOver);
leftContainer.addEventListener('drop', handleDropOnLeft);
// ----- Drag and Drop Handlers -----
function handleDragStart(e) {
// Set the dragged element’s id in the dataTransfer object.
e.dataTransfer.setData("text/plain", e.target.id);
// If the word is being dragged from a droppable, remove any matching style from that container.
let parent = e.target.parentElement;
if (parent.classList.contains('droppable')) {
parent.classList.remove('correct', 'incorrect');
}
}
function handleDragOver(e) {
// Allow dropping by preventing the default.
e.preventDefault();
}
// Handle drop on a droppable (the definitions on the right)
function handleDrop(e) {
e.preventDefault();
let draggedId = e.dataTransfer.getData("text/plain");
let draggedEl = document.getElementById(draggedId);
let dropZone = e.currentTarget;
// If the drop zone already has a word, remove it and send it back to the left column.
const existingWord = dropZone.querySelector('.draggable');
if (existingWord) {
leftContainer.appendChild(existingWord);
}
// Append the dragged word to the drop zone.
dropZone.appendChild(draggedEl);
// Check if the word and the definition match.
if (draggedEl.dataset.match === dropZone.dataset.match) {
dropZone.classList.add('correct');
dropZone.classList.remove('incorrect');
} else {
dropZone.classList.add('incorrect');
dropZone.classList.remove('correct');
}
checkWin();
}
// Handle drop on the left container (to remove a word from a definition box)
function handleDropOnLeft(e) {
e.preventDefault();
let draggedId = e.dataTransfer.getData("text/plain");
let draggedEl = document.getElementById(draggedId);
// Append the word back to the left container.
leftContainer.appendChild(draggedEl);
checkWin();
}
// Check whether every droppable has the correct matching word.
function checkWin() {
const droppables = document.querySelectorAll('.droppable');
let allCorrect = true;
droppables.forEach(zone => {
// If a zone does not contain a word or isn’t marked correct, the game isn’t complete.
if (!zone.querySelector('.draggable') || !zone.classList.contains('correct')) {
allCorrect = false;
}
});
if (allCorrect) {
messageEl.style.display = 'block';
} else {
messageEl.style.display = 'none';
}
}
</script>
</body>
</html>
```
En utilisant le modèle HTML suivant, remplacez les mots par {{ nombre de mots }} mots liés à {{ sujet ou liste de mots }}. N'incluez pas les mots eux-mêmes dans leurs définitions, définissez chaque mot sans utiliser le mot.
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Restaurant Ordering Vocabulary Flashcards</title>
<style>
/* Basic page styling */
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Container to enable 3D flip effect */
.flashcard-container {
perspective: 1000px;
}
/* Flashcard styling */
.flashcard {
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/* Flip the card when the .flipped class is added */
.flashcard.flipped {
transform: rotateY(180deg);
}
/* Front and back faces of the flashcard */
.flashcard .front,
.flashcard .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
font-size: 24px;
text-align: center;
}
/* The back face is rotated 180 degrees */
.flashcard .back {
transform: rotateY(180deg);
}
/* Visual feedback for correct and incorrect answers */
.flashcard.correct {
background-color: #d4edda; /* light green */
}
.flashcard.incorrect {
background-color: #f8d7da; /* light red */
}
/* Styling for answer choices */
#choices-container {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
#choices-container button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #4285F4;
color: #fff;
}
/* Modal styling for "Well done" popup */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 300px;
text-align: center;
border-radius: 8px;
}
.close-btn {
margin-top: 20px;
padding: 8px 16px;
background-color: #4285F4;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="flashcard-container">
<div id="flashcard" class="flashcard">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<!-- Container for answer choices -->
<div id="choices-container"></div>
<!-- Modal for "Well done" -->
<div id="modal" class="modal">
<div class="modal-content">
<h2>Well done!</h2>
<button id="closeBtn" class="close-btn">Close</button>
</div>
</div>
<script>
// Vocabulary cards for restaurant ordering
const cards = [
{
word: "Menu",
definition: "The list of available food and drinks."
},
{
word: "Appetizer",
definition: "A small dish served before the main meal."
},
{
word: "Entree",
definition: "The main course of the meal."
},
{
word: "Dessert",
definition: "A sweet dish served after the main meal."
},
{
word: "Waitstaff",
definition: "The staff serving food and drinks to customers."
},
{
word: "Order",
definition: "A request for specific food or drinks."
},
{
word: "Bill",
definition: "The total charge for the meal."
},
{
word: "Tip",
definition: "An amount left for good service."
}
];
let currentCardIndex = 0;
let animating = false; // Prevents multiple selections during animation
const flashcard = document.getElementById('flashcard');
const frontDiv = flashcard.querySelector('.front');
const backDiv = flashcard.querySelector('.back');
const modal = document.getElementById('modal');
const closeBtn = document.getElementById('closeBtn');
// Utility function to shuffle an array in place
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// Display the current card's word and generate answer choices
function showCurrentCard() {
if (currentCardIndex < cards.length) {
const card = cards[currentCardIndex];
frontDiv.textContent = card.word;
backDiv.textContent = card.definition;
// Reset flashcard state
flashcard.classList.remove('flipped', 'correct', 'incorrect');
// Clear previous choices
const choicesContainer = document.getElementById('choices-container');
choicesContainer.innerHTML = '';
// Generate answer choices: correct definition and two incorrect definitions
const correctDefinition = card.definition;
// Get definitions from other cards
const otherCards = cards.filter((c, index) => index !== currentCardIndex);
shuffleArray(otherCards);
const wrongChoices = otherCards.slice(0, 2).map(c => c.definition);
// Combine and shuffle choices
const choices = [correctDefinition, ...wrongChoices];
shuffleArray(choices);
// Create buttons for each choice
choices.forEach(choice => {
const btn = document.createElement('button');
btn.textContent = choice;
btn.addEventListener('click', function() {
handleChoice(choice);
});
choicesContainer.appendChild(btn);
});
} else {
// All cards viewed; show modal
modal.style.display = "block";
// Clear choices if any
document.getElementById('choices-container').innerHTML = '';
}
}
// Handle answer choice selection with a two-step delay:
// 1. Show the back (definition) with feedback for 1.5 seconds.
// 2. Then flip back and update the card after the flip-back animation.
function handleChoice(selectedChoice) {
if (animating) return;
animating = true;
// Disable all choice buttons to prevent further clicks
const buttons = document.querySelectorAll('#choices-container button');
buttons.forEach(btn => btn.disabled = true);
const card = cards[currentCardIndex];
const isCorrect = selectedChoice === card.definition;
if (isCorrect) {
flashcard.classList.add('correct');
} else {
flashcard.classList.add('incorrect');
}
// Flip the card to reveal the definition
flashcard.classList.add('flipped');
// After 1.5 seconds, flip the card back
setTimeout(function() {
flashcard.classList.remove('flipped');
// Wait for the flip-back animation to complete (600ms) before updating the card
setTimeout(function() {
currentCardIndex++;
showCurrentCard();
animating = false;
}, 600); // This duration should match the CSS transition duration
}, 1500); // Delay to let the user see the definition
}
// Close button on modal resets the game
closeBtn.addEventListener('click', function() {
modal.style.display = "none";
currentCardIndex = 0;
showCurrentCard();
});
// Initialize the first flashcard
showCurrentCard();
</script>
</body>
</html>
```