کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **تمرین‌کننده ریاضی (Math Trainer)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا تمرینات ریاضی تصادفی انجام دهند و نتایج خود را بررسی کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای تمرین‌کننده ریاضی ایجاد می‌کنیم.
```html
تمرین‌کننده ریاضی
تمرین‌کننده ریاضی
```
### 2. **CSS**
برای طراحی ظاهری تمرین‌کننده ریاضی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
width: 70%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل تولید سوالات تصادفی، بررسی پاسخ‌ها و مدیریت وضعیت تمرین است.
```javascript
const questionDiv = document.getElementById('question');
const answerInput = document.getElementById('answer');
const submitAnswerBtn = document.getElementById('submitAnswerBtn');
const resultDiv = document.getElementById('result');
const nextQuestionBtn = document.getElementById('nextQuestionBtn');
let correctAnswer = 0;
// تولید سوال تصادفی
function generateQuestion() {
const num1 = Math.floor(Math.random() * 10); // عدد اول
const num2 = Math.floor(Math.random() * 10); // عدد دوم
const operator = Math.random() < 0.5 ? '+' : '-'; // انتخاب عملگر
questionDiv.textContent = `${num1} ${operator} ${num2} = ?`;
// محاسبه پاسخ صحیح
correctAnswer = operator === '+' ? num1 + num2 : num1 - num2;
}
// افزودن رویداد کلیک به دکمه ارسال پاسخ
submitAnswerBtn.addEventListener('click', function() {
const userAnswer = parseInt(answerInput.value);
// بررسی پاسخ کاربر
if (userAnswer === correctAnswer) {
resultDiv.textContent = 'پاسخ صحیح است!';
} else {
resultDiv.textContent = `پاسخ نادرست است. پاسخ صحیح: ${correctAnswer}`;
}
answerInput.value = ''; // پاک کردن ورودی
submitAnswerBtn.style.display = 'none'; // مخفی کردن دکمه ارسال
nextQuestionBtn.style.display = 'block'; // نمایش دکمه سوال بعدی
});
// افزودن رویداد کلیک به دکمه سوال بعدی
nextQuestionBtn.addEventListener('click', function() {
resultDiv.textContent = ''; // پاک کردن نتیجه
nextQuestionBtn.style.display = 'none'; // مخفی کردن دکمه سوال بعدی
submitAnswerBtn.style.display = 'block'; // نمایش دکمه ارسال
generateQuestion(); // تولید سوال جدید
});
// تولید سوال اولیه
generateQuestion();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، نمایش سوال، ورودی برای پاسخ، و دکمه‌هایی برای ارسال پاسخ و رفتن به سوال بعدی است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **تولید سوالات تصادفی**: با استفاده از اعداد تصادفی و عملگرهای جمع و تفریق.
- **بررسی پاسخ**: با مقایسه پاسخ کاربر با پاسخ صحیح و نمایش نتیجه.
- **مدیریت وضعیت**: شامل نمایش و پنهان‌سازی دکمه‌ها و تولید سوالات جدید.
### نتیجه‌گیری
این پروژه **تمرین‌کننده ریاضی** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، رویدادهای کاربر و استفاده از اعداد تصادفی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند انواع مختلف سوالات (ضرب و تقسیم)، زمان‌بندی برای پاسخ دادن یا ذخیره نتایج تمرین را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **تمرین‌کننده ریاضی (Math Trainer)** با استفاده از HTML، CSS و JavaScript می‌باشد
