Building a quiz/test feature in Power Pages

A quiz or test feature can enhance the interactivity and effectiveness of a Power Pages training portal or educational platform. Whether it’s for evaluating knowledge after a course module or as a self-assessment tool, implementing this feature involves a blend of Dataverse data modeling, web templates, JavaScript logic, and secure user interaction.

Below is a step-by-step guide to building a dynamic quiz/test feature in Power Pages.

---

Core Objectives

• Display a quiz with multiple questions
• Support different question types (e.g., multiple-choice, true/false)
• Track user responses and scores
• Show instant results or defer grading
• Restrict access and ensure each user attempts only once (optional)

---

Step 1: Dataverse Table Design

Create the following custom tables to manage quizzes and responses:

1. Quiz Table

• Name (Text)
• Description (Multiline Text)
• Duration (Optional) (Whole Number in Minutes)
• IsActive (Yes/No)

2. Question Table

• Quiz (Lookup to Quiz Table)
• Question Text (Multiline Text)
• Question Type (Choice: Multiple Choice, True/False, Short Answer)
• Correct Answer (Text for MCQ or Boolean)

3. Answer Option Table (For MCQs)

• Question (Lookup)
• Option Text (Text)

4. User Response Table

• Quiz (Lookup)
• User (Contact) (Lookup)
• Question (Lookup)
• Selected Answer (Text)
• IsCorrect (Yes/No)
• Score (Optional)

---

Step 2: Set Up Web Roles and Permissions

Ensure only authenticated users can access the quiz and store their answers:

• Web Role: Authenticated Users
• Grant Create and Read access for:
  • User Response Table
  • Quiz Table
  • Question Table
  • Answer Option Table

---

Step 3: Quiz Page Structure

Create a new Web Page (e.g., /quiz) with a Web Template or use a basic form for rendering questions dynamically.

Key Sections:

1. Quiz Header – Title, Description, Instructions
2. Question Section – Loop through each question and render options
3. Submit Button – Save answers and evaluate

---

Step 4: Display Questions Dynamically (JavaScript + Liquid)

Use Liquid to load questions and answer options.
Use JavaScript/jQuery to capture and submit user inputs.

{% assign quizId = request.params['quizid'] %}
{% assign questions = entities.question | where: "quiz.id", quizId %}

{% for q in questions %}
  <div class="question-block" data-question-id="{{ q.id }}">
    <p><strong>Q{{ forloop.index }}:</strong> {{ q.questiontext }}</p>
    {% assign options = entities.answeroption | where: "question.id", q.id %}
    {% for opt in options %}
      <input type="radio" name="question_{{ q.id }}" value="{{ opt.optiontext }}"> {{ opt.optiontext }}<br>
    {% endfor %}
  </div>
{% endfor %}
<button id="submitQuiz">Submit</button>
<div id="quizResult"></div>

---

Step 5: Handling Submission with JavaScript

Use fetch or Web API to submit user responses to the User Response table.

document.getElementById("submitQuiz").addEventListener("click", function () {
  let score = 0;
  document.querySelectorAll(".question-block").forEach(function (block) {
    let questionId = block.getAttribute("data-question-id");
    let selected = block.querySelector("input[type='radio']:checked");
    if (selected) {
      let answer = selected.value;
      
      // Submit to Dataverse using Web API
      Xrm.WebApi.createRecord("new_userresponse", {
        "new_questionid@odata.bind": `/new_questions(${questionId})`,
        "new_selectedanswer": answer,
        // include quizId and user reference
      }).then(function () {
        // Optional: calculate score, display result
      });
    }
  });
});

---

Step 6: Display Score or Results

After submission, calculate the score:

• Retrieve correct answers
• Compare with selected answers
• Display total score and feedback

Use Power Automate for advanced evaluation or delayed results.

---

Optional Features

1. Timer Countdown

Use JavaScript to show a countdown and auto-submit when time expires.

2. Single Attempt Control

Check existing responses via Dataverse. If found, disable reattempt.

3. Instant Feedback

Display a checkmark or explanation after each question.

4. Randomize Questions

Add logic to shuffle the question order for each user.

5. Export Results

Allow users or admins to export scores as PDF or Excel using Power Automate.

---

Admin and Instructor Panel

Enable course managers to:

• Create new quizzes
• Add/edit/delete questions
• Review scores and user attempts

Use custom model-driven apps or Power Pages forms.

---

Mobile and Accessibility Design

• Use responsive components for mobile screens
• Use labels, placeholders, and ARIA attributes for screen readers
• Ensure keyboard navigation support

---

Security Tips

• Validate inputs both client-side and server-side
• Avoid storing answers in plain text
• Use role-based restrictions for quiz creation and management