کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد **مسابقه (Quiz)** با استفاده از 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;
}
.quiz-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
#result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
```
### 3. **JavaScript**
سپس منطق مسابقه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// سوالات مسابقه
const quizQuestions = [
{
question: "جاوااسکریپت برای چه کاری استفاده می‌شود؟",
answers: {
a: "ایجاد صفحات وب ثابت",
b: "تعامل و ایجاد صفحات پویا",
c: "تنظیم رنگ صفحات"
},
correctAnswer: "b"
},
{
question: "کدام علامت برای تعریف یک آرایه استفاده می‌شود؟",
answers: {
a: "[]",
b: "{}",
c: "()"
},
correctAnswer: "a"
},
{
question: "چگونه می‌توان یک تابع را فراخوانی کرد؟",
answers: {
a: "myFunction()",
b: "call myFunction",
c: "function myFunction"
},
correctAnswer: "a"
}
];
// گرفتن المنت‌های صفحه
const quizContainer = document.getElementById('quiz');
const submitButton = document.getElementById('submit');
const resultContainer = document.getElementById('result');
// نمایش سوالات مسابقه
function displayQuiz() {
const output = [];
quizQuestions.forEach((currentQuestion, questionIndex) => {
const answers = [];
for (let letter in currentQuestion.answers) {
answers.push(
`
${letter} :
${currentQuestion.answers[letter]}
`
);
}
output.push(
`
${currentQuestion.question}
);
});
quizContainer.innerHTML = output.join('');
}
// نمایش نتیجه‌ها
function showResults() {
const answerContainers = quizContainer.querySelectorAll('.answers');
let score = 0;
quizQuestions.forEach((currentQuestion, questionIndex) => {
const answerContainer = answerContainers[questionIndex];
const selector = `input[name=question${questionIndex}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if (userAnswer === currentQuestion.correctAnswer) {
score++;
answerContainer.style.color = 'green';
} else {
answerContainer.style.color = 'red';
}
});
resultContainer.textContent = `امتیاز شما: ${score} از ${quizQuestions.length}`;
}
// نمایش سوالات
displayQuiz();
// اضافه کردن رویداد کلیک به دکمه ارسال
submitButton.addEventListener('click', showResults);
```
### توضیحات کد:
1. **HTML**: ساختار اصلی مسابقه را تشکیل می‌دهد و شامل بخشی برای نمایش سوالات، دکمه ارسال پاسخ‌ها و بخشی برای نمایش نتیجه است.
2. **CSS**: طراحی ساده‌ای برای رابط کاربری مسابقه فراهم می‌کند تا کاربران بتوانند به راحتی به سوالات پاسخ دهند.
3. **JavaScript**:
- **سوالات مسابقه**: لیستی از سوالات چند گزینه‌ای که در قالب یک آرایه از اشیاء تعریف شده‌اند.
- **نمایش سوالات**: تابع `displayQuiz` سوالات را به صفحه اضافه می‌کند.
- **محاسبه نتیجه**: تابع `showResults` به کاربر امتیاز می‌دهد و سوالاتی که درست و غلط پاسخ داده شده‌اند را با رنگ‌های مختلف مشخص می‌کند.
- **رویداد کلیک**: دکمه "ارسال پاسخ‌ها" امتیاز کاربر را محاسبه و نمایش می‌دهد.
### نتیجه‌گیری
این پروژه **مسابقه (Quiz)** یک مثال عالی برای استفاده از JavaScript برای مدیریت و تعامل با داده‌ها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تایمر، نمایش سوالات به‌صورت تصادفی، یا امکان افزودن سوالات جدید توسط کاربران به آن اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه برای ایجاد **مسابقه (Quiz)** با استفاده از HTML، CSS و JavaScript می‌باشد
