Simplification Puissances
Créateur d'applications
Créateur d'applications
À propos
3,6 k abonnés
·
Plus de 24 points
Spécialisé dans la création d'applications web interactives destinées à être publiées sur Poe. Disponible en accès anticipé à prix réduit pour une durée limitée. Optimisé par Claude 3.7 Sonnet. Découvrez les nouveautés : https://creator.poe.com/docs/canvas-app-changelog
- OFFICIEL
Aujourd'hui
Décrivez votre idée et ses principales fonctionnalités et je vous aiderai à la développer. N'hésitez pas à me contacter pour demander des modifications. Cliquez sur « Publier » pour finaliser la création de votre application.
Guide et astuces : https://creator.poe.com/docs/canvas-app-quick-start
11:49
donne moi une page html en langue arabe dynamique et interactive qui demande a l'utilisateur de simplifier des expression de puissances d'entiers , toutes les regles sauf la division
tu dois demander a l'utilisateur d'entrer l'exposant du resultat tu mets un bouton pour verifier la reponse , un autre opour corriger et un troisieme bouton pour une nouvelle operation
tu propose a l'utilisateur de choisir oubien chauqe type de formule a part ou bien un melange
les expressions mathematiques doivent etre ecrites de gauche a droite
11:49
Pensée...
Analysons cette requête. L'utilisateur souhaite une page HTML en arabe, dynamique et interactive. Elle doit :
- Demandez à l'utilisateur de simplifier les expressions impliquant des puissances d'entiers
- Inclure toutes les règles de pouvoir sauf la division
- Demandez à l'utilisateur d'entrer l'exposant du résultat
- Inclure des boutons pour :
- Vérifiez la réponse
- Corrigez la réponse
- Obtenez un nouveau problème
- Permettre aux utilisateurs de choisir des types de formules spécifiques ou un mélange
- Afficher les expressions mathématiques de gauche à droite (et non de droite à gauche en arabe traditionnel)
Commençons d’abord par décrire les règles de puissance que nous devons mettre en œuvre :
- Règle du produit : a^m × a^n = a^(m+n)
- Règle de puissance d'une puissance : (a^m)^n = a^(m×n)
- Règle de la puissance d'un produit : (a×b)^n = a^n × b^n
- Règle de l'exposant négatif : a^(-n) = 1/(a^n)
- Règle de l'exposant zéro : a^0 = 1 (si a ≠ 0)
Nous n'inclurons PAS la règle de division : a^m ÷ a^n = a^(mn) comme demandé.
Je vais maintenant créer une page HTML répondant à ces exigences. J'utiliserai :
- HTML pour la structure
- CSS pour le style avec prise en charge des modes clair et sombre
- JavaScript pour la fonctionnalité interactive
- Texte arabe pour les éléments de l'interface utilisateur
- TailwindCSS pour une conception réactive
Je m'assurerai d'inclure la logique pour :
- Générer des problèmes aléatoires en fonction des types de règles sélectionnés
- Valider les réponses des utilisateurs
- Fournir des commentaires sur les réponses
- Permettre aux utilisateurs de voir la bonne réponse
- Générer de nouveaux problèmes à la demande
Commençons à créer l’application :
Je vais créer une page HTML interactive en arabe qui permet de pratiquer la simplification d'expressions avec des puissances d'entiers.
HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تبسيط تعابير القوى</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#5D5CDE',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
body {
font-family: 'Tajawal', sans-serif;
}
.math-expression {
direction: ltr;
display: inline-block;
text-align: left;
}
.dark .math-expression {
color: white;
}
.dark input::placeholder {
color: #9ca3af;
}
</style>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen">
<script>
// Dark mode detection
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
if (event.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
</script>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<header class="text-center mb-8">
<h1 class="text-3xl font-bold text-primary mb-2">تبسيط تعابير القوى</h1>
<p class="text-lg">بسّط التعبير ثم أدخل دليل القوة في النتيجة النهائية</p>
</header>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 shadow-md mb-8">
<h2 class="text-xl font-bold mb-4">اختر نوع التعابير:</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<label class="flex items-center space-x-3 space-x-reverse">
<input type="checkbox" id="productRule" class="h-5 w-5 text-primary rounded" checked>
<span>قاعدة الضرب: a<sup>m</sup> × a<sup>n</sup> = a<sup>m+n</sup></span>
</label>
<label class="flex items-center space-x-3 space-x-reverse">
<input type="checkbox" id="powerOfPower" class="h-5 w-5 text-primary rounded" checked>
<span>قوة القوة: (a<sup>m</sup>)<sup>n</sup> = a<sup>m×n</sup></span>
</label>
<label class="flex items-center space-x-3 space-x-reverse">
<input type="checkbox" id="powerOfProduct" class="h-5 w-5 text-primary rounded" checked>
<span>قوة الضرب: (a×b)<sup>n</sup> = a<sup>n</sup> × b<sup>n</sup></span>
</label>
<label class="flex items-center space-x-3 space-x-reverse">
<input type="checkbox" id="negativeExponent" class="h-5 w-5 text-primary rounded" checked>
<span>دليل القوة السالب: a<sup>-n</sup> = 1/(a<sup>n</sup>)</span>
</label>
<label class="flex items-center space-x-3 space-x-reverse">
<input type="checkbox" id="zeroExponent" class="h-5 w-5 text-primary rounded" checked>
<span>دليل القوة الصفري: a<sup>0</sup> = 1</span>
</label>
<label class="flex items-center space-x-3 space-x-reverse">
<input type="checkbox" id="mixedRules" class="h-5 w-5 text-primary rounded" checked>
<span>مزيج من القواعد</span>
</label>
</div>
<button id="generateBtn" class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-lg w-full">
توليد تمرين جديد
</button>
</div>
<div id="exerciseContainer" class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md mb-8 hidden">
<h2 class="text-xl font-bold mb-4">بسّط التعبير التالي:</h2>
<div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-6">
<div class="text-2xl font-bold math-expression" id="expression"></div>
<div class="text-2xl font-bold">=</div>
<div class="flex items-center">
<div class="text-2xl math-expression" id="baseExpression"></div>
<div class="text-2xl">
<input type="number" id="userAnswer" class="w-20 border-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-lg px-2 py-1 text-center text-base" placeholder="دليل القوة">
</div>
</div>
</div>
<div class="flex flex-wrap gap-4 justify-center">
<button id="checkBtn" class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-lg">
تحقق من الإجابة
</button>
<button id="showAnswerBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-6 rounded-lg">
أظهر الحل
</button>
<button id="newExerciseBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg">
تمرين جديد
</button>
</div>
<div id="feedback" class="mt-6 text-center text-lg hidden"></div>
</div>
</div>
<script>
// DOM elements
const exerciseContainer = document.getElementById('exerciseContainer');
const expressionEl = document.getElementById('expression');
const baseExpressionEl = document.getElementById('baseExpression');
const userAnswerInput = document.getElementById('userAnswer');
const feedbackEl = document.getElementById('feedback');
const generateBtn = document.getElementById('generateBtn');
const checkBtn = document.getElementById('checkBtn');
const showAnswerBtn = document.getElementById('showAnswerBtn');
const newExerciseBtn = document.getElementById('newExerciseBtn');
// Checkbox elements
const productRuleCheckbox = document.getElementById('productRule');
const powerOfPowerCheckbox = document.getElementById('powerOfPower');
const powerOfProductCheckbox = document.getElementById('powerOfProduct');
const negativeExponentCheckbox = document.getElementById('negativeExponent');
const zeroExponentCheckbox = document.getElementById('zeroExponent');
const mixedRulesCheckbox = document.getElementById('mixedRules');
// Current exercise data
let currentExercise = {
expression: '',
base: '',
correctExponent: null
};
// Generate random integer between min and max (inclusive)
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Get random non-zero integer between min and max (inclusive)
function getRandomNonZeroInt(min, max) {
let num;
do {
num = getRandomInt(min, max);
} while (num === 0);
return num;
}
// Generate a random base (letter)
function getRandomBase() {
const bases = ['a', 'b', 'x', 'y', 'm', 'n'];
return bases[Math.floor(Math.random() * bases.length)];
}
// Generate a product rule exercise
function generateProductRule() {
const base = getRandomBase();
const exp1 = getRandomInt(-5, 5);
const exp2 = getRandomInt(-5, 5);
return {
expression: `${base}<sup>${exp1}</sup> × ${base}<sup>${exp2}</sup>`,
base: base,
correctExponent: exp1 + exp2
};
}
// Generate a power of power rule exercise
function generatePowerOfPower() {
const base = getRandomBase();
const exp1 = getRandomInt(-3, 3);
const exp2 = getRandomInt(-3, 3);
return {
expression: `(${base}<sup>${exp1}</sup>)<sup>${exp2}</sup>`,
base: base,
correctExponent: exp1 * exp2
};
}
// Generate a power of product rule exercise
function generatePowerOfProduct() {
const base1 = getRandomBase();
let base2;
do {
base2 = getRandomBase();
} while (base2 === base1);
const exponent = getRandomInt(1, 4);
return {
expression: `(${base1} × ${base2})<sup>${exponent}</sup>`,
base: `${base1} × ${base2}`,
correctExponent: exponent
};
}
// Generate a negative exponent rule exercise
function generateNegativeExponent() {
const base = getRandomBase();
const exponent = getRandomNonZeroInt(-5, -1);
return {
expression: `${base}<sup>${exponent}</sup>`,
base: `1/${base}`,
correctExponent: -exponent
};
}
// Generate a zero exponent rule exercise
function generateZeroExponent() {
const base = getRandomBase();
return {
expression: `${base}<sup>0</sup>`,
base: `1`,
correctExponent: 0 // This doesn't matter as the base is 1
};
}
// Generate a mixed rule exercise
function generateMixedRule() {
// Randomly choose two bases
const base1 = getRandomBase();
let base2;
do {
base2 = getRandomBase();
} while (base2 === base1);
// Generate random exponents
const exp1 = getRandomInt(-3, 3);
const exp2 = getRandomInt(-3, 3);
const exp3 = getRandomInt(-2, 2);
// Randomly choose the type of mixed exercise
const mixType = getRandomInt(1, 3);
if (mixType === 1) {
// Product and power: (a^m × a^n)^p
return {
expression: `(${base1}<sup>${exp1}</sup> × ${base1}<sup>${exp2}</sup>)<sup>${exp3}</sup>`,
base: base1,
correctExponent: (exp1 + exp2) * exp3
};
} else if (mixType === 2) {
// Power of product and power: ((a×b)^m)^n
return {
expression: `((${base1} × ${base2})<sup>${exp1}</sup>)<sup>${exp2}</sup>`,
base: `${base1} × ${base2}`,
correctExponent: exp1 * exp2
};
} else {
// Product with negative/zero exponents: a^m × a^(-n)
const negExp = getRandomInt(-3, -1);
return {
expression: `${base1}<sup>${exp1}</sup> × ${base1}<sup>${negExp}</sup>`,
base: base1,
correctExponent: exp1 + negExp
};
}
}
// Generate an exercise based on selected types
function generateExercise() {
const selectedTypes = [];
if (productRuleCheckbox.checked) selectedTypes.push('product');
if (powerOfPowerCheckbox.checked) selectedTypes.push('powerOfPower');
if (powerOfProductCheckbox.checked) selectedTypes.push('powerOfProduct');
if (negativeExponentCheckbox.checked) selectedTypes.push('negative');
if (zeroExponentCheckbox.checked) selectedTypes.push('zero');
if (mixedRulesCheckbox.checked) selectedTypes.push('mixed');
// If no types are selected, default to product rule
if (selectedTypes.length === 0) {
selectedTypes.push('product');
productRuleCheckbox.checked = true;
}
const randomType = selectedTypes[Math.floor(Math.random() * selectedTypes.length)];
switch(randomType) {
case 'product':
return generateProductRule();
case 'powerOfPower':
return generatePowerOfPower();
case 'powerOfProduct':
return generatePowerOfProduct();
case 'negative':
return generateNegativeExponent();
case 'zero':
return generateZeroExponent();
case 'mixed':
return generateMixedRule();
default:
return generateProductRule();
}
}
// Show a new exercise
function showNewExercise() {
currentExercise = generateExercise();
expressionEl.innerHTML = currentExercise.expression;
baseExpressionEl.innerHTML = currentExercise.base + '<sup>';
userAnswerInput.value = '';
// Show the exercise container and hide feedback
exerciseContainer.classList.remove('hidden');
feedbackEl.classList.add('hidden');
// Focus on answer input
userAnswerInput.focus();
}
// Check user's answer
function checkAnswer() {
const userAnswer = parseInt(userAnswerInput.value);
if (isNaN(userAnswer)) {
showFeedback('الرجاء إدخال قيمة عددية', 'error');
return;
}
if (userAnswer === currentExercise.correctExponent) {
showFeedback('إجابة صحيحة! أحسنت.', 'success');
} else {
showFeedback('إجابة خاطئة، حاول مرة أخرى.', 'error');
}
}
// Show the correct answer
function showAnswer() {
userAnswerInput.value = currentExercise.correctExponent;
showFeedback('الإجابة الصحيحة هي: ' + currentExercise.correctExponent, 'neutral');
}
// Show feedback to the user
function showFeedback(message, type) {
feedbackEl.textContent = message;
feedbackEl.classList.remove('hidden', 'text-green-600', 'text-red-600', 'text-gray-600');
if (type === 'success') {
feedbackEl.classList.add('text-green-600', 'dark:text-green-400');
} else if (type === 'error') {
feedbackEl.classList.add('text-red-600', 'dark:text-red-400');
} else {
feedbackEl.classList.add('text-gray-600', 'dark:text-gray-400');
}
}
// Event listeners
generateBtn.addEventListener('click', showNewExercise);
newExerciseBtn.addEventListener('click', showNewExercise);
checkBtn.addEventListener('click', checkAnswer);
showAnswerBtn.addEventListener('click', showAnswer);
userAnswerInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
checkAnswer();
}
});
// Initialize with a new exercise
showNewExercise();
</script>
</body>
</html>
html 1
Cette application interactive en arabe permet aux utilisateurs de pratiquer la simplification d'expressions de puissances d'entiers. Voici ce qu'elle propose :
Fonctionnalités :
- Une interface entièrement en arabe avec direction de texte RTL
- Les expressions mathématiques sont affichées de gauche à droite comme demandé
- Plusieurs types de règles de simplification de puissances :
- Règle du produit (a^m × a^n = a^(m+n))
- Règle de la puissance d'une puissance ((a^m)^n = a^(m×n))
- Règle de la puissance d'un produit ((a×b)^n = a^n × b^n)
- Règle de l'exposant négatif (a^(-n) = 1/(a^n))
- Règle de l'exposant zéro (a^0 = 1)
- Combinaisons de règles
- L'utilisateur peut choisir les types de règles qu'il souhaite pratiquer
- Trois boutons comme demandé :
- Un bouton pour vérifier la réponse
- Un bouton pour voir la solution correcte
- Un bouton pour générer un nouvel exercice
- Support du mode clair et sombre
- Conception responsive qui s'adapte aux mobiles et aux ordinateurs de bureau
L'application génère automatiquement des exercices aléatoires basés sur les types de règles sélectionnés, affiche l'expression à simplifier, et demande à l'utilisateur d'entrer l'exposant du résultat final.
Avez-vous besoin de modifications ou d'améliorations spécifiques pour cette application ?
11:49
Déposer les fichiers ici
