کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **کوئز فیلم** با استفاده از 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: 600px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.question {
margin: 20px 0;
}
.answer {
margin: 10px 0;
}
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 quizQuestions = [
{
question: "کدام فیلم در سال 1994 منتشر شد؟",
answers: [
"جنگ ستارگان: قسمت چهارم",
"تایتانیک",
"شکستن حداکثر",
"فارست گامپ"
],
correctAnswer: "فارست گامپ"
},
{
question: "کارگردان فیلم 'شلاق' کیست؟",
answers: [
"تاد فیلد",
"دنی ویلنو",
"دیوید فینچر",
"دامین شازل"
],
correctAnswer: "دامین شازل"
},
{
question: "کدام یک از این فیلم‌ها برنده اسکار بهترین فیلم در سال 2020 شد؟",
answers: [
"1917",
"جوکر",
"بچه‌های بد",
"پارازیت"
],
correctAnswer: "پارازیت"
}
];
let currentQuestionIndex = 0;
let score = 0;
// نمایش سؤال کوئز
function displayQuestion() {
const quizDiv = document.getElementById('quiz');
quizDiv.innerHTML = '';
const currentQuestion = quizQuestions[currentQuestionIndex];
const questionElement = document.createElement('div');
questionElement.classList.add('question');
questionElement.textContent = currentQuestion.question;
quizDiv.appendChild(questionElement);
currentQuestion.answers.forEach(answer => {
const answerElement = document.createElement('div');
answerElement.classList.add('answer');
answerElement.innerHTML = `
${answer}
`;
quizDiv.appendChild(answerElement);
});
}
// بررسی پاسخ‌ها
function checkAnswer() {
const selectedAnswer = document.querySelector('input[name="answer"]:checked');
if (!selectedAnswer) return;
if (selectedAnswer.value === quizQuestions[currentQuestionIndex].correctAnswer) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < quizQuestions.length) {
displayQuestion();
} else {
showResult();
}
}
// نمایش نتیجه نهایی
function showResult() {
const quizDiv = document.getElementById('quiz');
quizDiv.innerHTML = '';
const resultDiv = document.getElementById('result');
resultDiv.textContent = `شما ${score} از ${quizQuestions.length} پاسخ صحیح دادید!`;
}
// افزودن رویداد کلیک به دکمه ارسال
document.getElementById('submitBtn').addEventListener('click', checkAnswer);
// نمایش سؤال اولیه
displayQuestion();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، نمایش سؤال و پاسخ‌ها و دکمه‌ای برای ارسال پاسخ‌ها است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **سؤالات کوئز**: آرایه‌ای شامل سؤالات و پاسخ‌های ممکن.
- **نمایش سؤال**: تابعی برای نمایش سؤال و گزینه‌های پاسخ.
- **بررسی پاسخ**: تابعی برای بررسی پاسخ کاربر و به‌روزرسانی نمره.
- **نمایش نتیجه**: تابعی برای نمایش نتیجه نهایی پس از اتمام کوئز.
### نتیجه‌گیری
این پروژه **کوئز فیلم** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، رویدادهای کاربر و مدیریت وضعیت است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن سؤالات بیشتر، تایمر برای پاسخ‌ها یا انتخاب دسته‌بندی‌های مختلف فیلم‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی ساده برای ایجاد یک **کوئز فیلم** با استفاده از HTML، CSS و JavaScript می‌باشد
