Update This Post

Introduction of Computer Parts | MCQ s Test |

Note: আপুনি ইয়াত Post টোৰ এটা copy edit কৰি আছে। Submit নকৰালৈ Live WordPress Post-ত কোনো change নহ'ব।

Post Title

Introduction of Computer Parts | MCQ s Test |

Post Title edit কৰিব নোৱাৰিব। কেৱল Post Content update কৰিব পাৰিব।

Post Content

<style>
  #quiz-box {
    max-width: 700px;
    margin: 30px auto;
    padding: 25px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
  }
  #quiz-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }
  .form-field {
    margin-bottom: 15px;
  }
  .form-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
  }
  .form-field input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
  }
  .question-card {
    margin-bottom: 20px;
    padding: 15px;
    background: #f7faff;
    border-left: 5px solid #007bff;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    transition: border 0.3s;
  }
  .question-card.error {
    border-left: 5px solid red;
    background: #fff1f1;
  }
  .question-card p {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .option {
    margin-left: 20px;
  }
  .submitBtn23 {
    display: block;
    margin: 20px auto;
    padding: 10px 30px;
    background: #007bff;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    }
  #submitBtn {
    display: block;
    margin: 20px auto;
    padding: 10px 30px;
    background: #007bff;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  #result {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: green;
    margin-top: 20px;
  }
  #loading {
    text-align: center;
    font-size: 18px;
    color: #444;
    margin-top: 20px;
    font-style: italic;
  }
</style>

<div class="form-field">
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="Enter Your Email" required>
    <button class="submitBtn23">Next</button>
  </div>

<div id="loading">Enter Your Email and Press Next Button!</div>
</div>

<button id="submitBtn" onclick="submitQuiz()" style="display:none;">Submit</button>
<div id="result"></div>

document.getElementById("email").addEventListener("blur", fetchQuestions);

function fetchQuestions() {
  const email = document.getElementById("email").value.trim();
  if (!email) return;

const loading = document.getElementById("loading");
  loading.innerText = "⏳ Checking email and loading questions…";

fetch(`${sheetURL}?email=${encodeURIComponent(email)}`)
    .then(res => res.text())
    .then(text => {
      if (text === "Your email is not available") {
        loading.innerText = "❌ Your email is not available for this exam.";
        document.getElementById("submitBtn").style.display = "none";
        return;
      }

const data = JSON.parse(text);
      const quizBox = document.getElementById("quiz-box");
      loading.remove();

data.forEach((q, i) => {
        const qDiv = document.createElement("div");
        qDiv.className = "question-card";
        qDiv.id = `qcard${i}`;
        qDiv.innerHTML = `<p>${i + 1}. ${q.question}</p>` +
          q.options.map((opt, idx) => {
            const optLetter = String.fromCharCode(65 + idx);
            return `<label class="option"><input type="radio" name="q${i}" value="${optLetter}" onchange="removeError(${i})"> ${opt}</label><br>`;
          }).join("");
        quizBox.appendChild(qDiv);
        correctAnswers.push(q.correct);
      });

totalQuestions = correctAnswers.length;
      document.getElementById("submitBtn").style.display = "block";
    })
    .catch(err => {
      document.getElementById("loading").innerText = "⚠️ Error loading quiz.";
      console.error(err);
    });
}

function removeError(index) {
  const card = document.getElementById(`qcard${index}`);
  card.classList.remove("error");
}

function submitQuiz() {
  const email = document.getElementById("email").value.trim();
  if (!email) {
    alert("⚠️ অনুগ্ৰহ কৰি Email পূৰ্ণ কৰক।");
    return;
  }

let hasError = false;
  const answersObj = {};

for (let i = 0; i < totalQuestions; i++) {
    const card = document.getElementById(`qcard${i}`);
    const selected = document.querySelector(`input[name="q${i}"]:checked`);
    if (!selected) {
      card.classList.add("error");
      hasError = true;
    } else {
      card.classList.remove("error");
      answersObj[`q${i}`] = selected.value;
    }
  }

if (hasError) {
    document.getElementById("result").innerText = "⚠️ অনুগ্ৰহ কৰি সকলো প্রশ্নৰ উত্তৰ দিয়ক।";
    return;
  }

const scoreText = `${score} / ${correctAnswers.length}`;
  document.getElementById("result").innerText =
    `? ${email} - আপোনাৰ নম্বৰ: ${scoreText}`;

document.getElementById("submitBtn").disabled = true;
  document.querySelectorAll("input").forEach(input => input.disabled = true);

// ✅ Submit email, score & answers to Sheet2
  fetch(sheetURL, {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: `email=${encodeURIComponent(email)}&score=${encodeURIComponent(scoreText)}&answers=${encodeURIComponent(JSON.stringify(answersObj))}`
  });
}
</script>

<p></p>

Your Email ID

Verification record-ৰ বাবে Email ID প্রয়োজন। Name নালাগে।

What did you update?

আপুনি কি কি সলনি কৰিলে সৰুকৈ লিখক। Admin Review page-ত automatic change highlight-ও দেখা যাব।

Submit কৰাৰ পাছত এই Update টো Pending Verification হিচাপে save হ'ব।