کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **کوئیز کد (Code Quiz)** با استفاده از JavaScript
این پروژه یک سیستم کوییز کد ساده است که به کاربران اجازه می‌دهد تا توانایی‌های خود را در برنامه‌نویسی آزمایش کنند. کاربران می‌توانند به سؤالات پاسخ دهند و نتیجه نهایی را مشاهده کنند. در این پروژه از 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: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
h2 {
margin: 20px 0;
}
#options {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
```
### 3. **JavaScript**
سپس منطق کوییز را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// سؤالات و گزینه‌ها
const quizQuestions = [
{
question: "چه عنصری در HTML برای ایجاد پیوند استفاده می‌شود؟",
},
{
question: "کدام زبان برای طراحی صفحات وب استفاده می‌شود؟",
options: ["HTML", "Python", "Java", "C++"],
answer: "HTML"
},
{
question: "کدام کد برای انتخاب یک عنصر با ID در JavaScript استفاده می‌شود؟",
options: ["document.getElementById()", "document.querySelector()", "document.getElementsByClassName()", "document.getElementByName()"],
answer: "document.getElementById()"
},
{
question: "کدام کد برای ایجاد یک تابع در JavaScript استفاده می‌شود؟",
options: ["function myFunction()", "function:myFunction()", "create myFunction()", "define myFunction()"],
answer: "function myFunction()"
},
{
question: "کدام خصوصیت CSS برای تغییر رنگ متن استفاده می‌شود؟",
options: ["color", "text-color", "font-color", "background-color"],
answer: "color"
}
];
let currentQuestionIndex = 0;
let score = 0;
// انتخاب عناصر HTML
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const nextBtn = document.getElementById('nextBtn');
const resultContainer = document.getElementById('result-container');
const scoreElement = document.getElementById('score');
const restartBtn = document.getElementById('restartBtn');
// بارگذاری سؤالات
function loadQuestion() {
const currentQuestion = quizQuestions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
optionsElement.innerHTML = '';
currentQuestion.options.forEach(option => {
const button = document.createElement('button');
button.textContent = option;
button.classList.add('option-btn');
button.addEventListener('click', () => selectOption(option));
optionsElement.appendChild(button);
});
}
// انتخاب گزینه
function selectOption(option) {
const currentQuestion = quizQuestions[currentQuestionIndex];
if (option === currentQuestion.answer) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < quizQuestions.length) {
loadQuestion();
} else {
showResult();
}
}
// نمایش نتیجه
function showResult() {
quizContainer.style.display = 'none';
resultContainer.style.display = 'block';
scoreElement.textContent = `شما ${score} از ${quizQuestions.length} را درست پاسخ دادید.`;
}
// بازنشانی کوییز
restartBtn.addEventListener('click', () => {
currentQuestionIndex = 0;
score = 0;
resultContainer.style.display = 'none';
quizContainer.style.display = 'block';
loadQuestion();
});
// بارگذاری اولیه سؤالات
loadQuestion();
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان برنامه، نمایش سؤال، گزینه‌ها و دکمه‌های ناوبری است.
2. **CSS**:
- طراحی ساده و کاربرپسند برای رابط کاربری.
3. **JavaScript**:
- **سؤالات**: آرایه‌ای از سؤالات و گزینه‌ها.
- **بارگذاری سؤال**: تابعی برای نمایش سؤال و گزینه‌ها.
- **انتخاب گزینه**: با انتخاب گزینه، امتیاز افزایش می‌یابد و سؤال بعدی بارگذاری می‌شود.
- **نمایش نتیجه**: نتیجه نهایی و امتیاز کاربر نمایش داده می‌شود.
- **بازنشانی کوییز**: کاربر می‌تواند کوییز را از ابتدا شروع کند.
### نتیجه‌گیری
این پروژه **کوییز کد** یک مثال عالی برای استفاده از JavaScript در ساخت برنامه‌های تعاملی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تایمر برای پاسخگویی به سؤالات یا ذخیره نتایج کاربران اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **کوئیز کد (Code Quiz)** با استفاده از JavaScript می‌باشد
