اسکریپت برای ایجاد سوالات چهار گزینه‌ای در جاوا اسکریپت و HTML


در دنیای مدرن توسعه وب، ساختن یک آزمون یا سوالات چند گزینه‌ای، یکی از نیازهای اساسی است که توسعه‌دهندگان وب با آن روبرو می‌شوند. این نوع سوالات، به خاطر سادگی و در عین حال کارایی‌شان، در بسیاری از سایت‌ها، آموزش‌های آنلاین و برنامه‌های آموزشی مورد استفاده قرار می‌گیرند. بنابراین، یکی از مهم‌ترین وظایف در توسعه این نوع سیستم، نوشتن اسکریپتی است که بتواند به صورت پویا، سوالات چند گزینه‌ای را تولید و مدیریت کند. در ادامه، قصد دارم به صورت جامع و کامل، درباره نحوه ایجاد این اسکریپت در قالب HTML و جاوا اسکریپت توضیح دهم، به گونه‌ای که حتی افرادی که تازه وارد حوزه توسعه وب شده‌اند، بتوانند این مفهوم را درک کنند و در پروژه‌های خود به کار گیرند.

ساختار پایه HTML




در ابتدا، باید بدانید که برای ایجاد یک سوال چهار گزینه‌ای، نیازمند یک ساختار پایه برای صفحه وب هستید. این ساختار شامل بخش‌هایی است که سوال، گزینه‌ها، و دکمه‌های لازم برای کنترل فرآیند پاسخ‌دهی و ارزیابی را در بر می‌گیرد. به طور معمول، بخش اصلی این ساختار، در قالب یک فرم یا div قرار می‌گیرد که به کمک تگ‌های HTML، عناصر لازم در آن جای می‌گیرند.
در نمونه‌ی ابتدایی، یک div با شناسه‌ای خاص، برای قرارگیری سوال و گزینه‌ها، تعریف می‌شود. همچنین، یک دکمه برای ارسال پاسخ‌ها، در این ساختار قرار می‌گیرد. مثلاً:
html  


<div id="quiz-container"></div>


<button id="submit-btn">ثبت پاسخ‌ها</button>


<div id="result"></div>

در اینجا، `quiz-container` جای سوال و گزینه‌ها را دارد، `submit-btn` برای تایید پاسخ‌ها، و `result` برای نمایش نتیجه نهایی.

افزودن سوالات و گزینه‌ها با جاوا اسکریپت




حالا، باید اسکریپتی بنویسید که این عناصر را به صورت داینامیک، با توجه به سوالات موجود، تولید کند. برای این منظور، معمولاً از آرایه‌هایی استفاده می‌شود که در آن، سوالات، گزینه‌ها، و پاسخ صحیح‌ها ذخیره شده‌اند. مثلا:
javascript  


const questions = [


  {


    question: "پایتخت ایران کجاست؟",


    options: ["اصفهان", "شیراز", "تهران", "مشهد"],


    answer: 2 // شاخص گزینه صحیح در آرایه options  


  },


  // سوالات دیگر هم به همین شکل اضافه می‌شوند  


];

در ادامه، باید یک تابع بنویسید که این سوالات را به صورت دینامیک، درون عنصر `quiz-container` قرار دهد. برای این کار، ابتدا، حلقه‌ای بر روی آرایه questions اجرا می‌شود و برای هر سوال، یک عنصر HTML ساخته می‌شود. به عنوان مثال، برای هر سوال، یک div حاوی متن سوال و چهار گزینه‌ی رادیویی ساخته می‌شود.
یک نمونه کد برای این فرآیند:
javascript  


function loadQuestions() {


  const container = document.getElementById("quiz-container");


  questions.forEach((question, index) => {


    const questionDiv = document.createElement("div");


    questionDiv.className = "ques...  ← ادامه مطلب در magicfile.ir