CSA Analytics Documentation

[code259]

Lesson Page Setup Guide

Each lesson page uses the shared layout.
You only need to define how your page collects answers.

---

Step 1: Add Metadata (Front Matter)

At the top of your Markdown file, add this metadata and add all relevant questions you ask that you want to be graded by gemini:

---
question: |
  Question 1: Explain how the Internet works.
  Question 2: What is an API?
---

Submit Button Rule

• The button that submits answers must have data-grade="true" attribute in the button tag.

<button data-grade="true">Submit</button>

• Usually this is the final “Submit” button on your page.
• Only one button per page should have this attribute.

---

Step 2: Collect Answers

Case 1 – One textbox

Basically get the value of the relevant textbox or whatnot and save it as response in the following format seen below!

<textarea id="response"></textarea>

<button data-grade="true">Submit</button>

<script>
window.getLessonData = function() {
  const response = document.getElementById('response').value;
  return { response };
};
</script>

---

Case 2 – Multiple textboxes

<p>Question 1:</p><textarea id="q1"></textarea>
<p>Question 2:</p><textarea id="q2"></textarea>

<button data-grade="true">Submit All Answers</button>

<script>
window.getLessonData = function() {
  const q1 = document.getElementById('q1').value;
  const q2 = document.getElementById('q2').value;

  // Combine all answers into one string
  const response = `1. ${q1}\n2. ${q2}`;
  return { response };
};
</script>

---

The layout automatically handles:

• Grading API calls
• Credentials
• The question from your front matter

You only define the answer collection logic.

---

Example (Submodule 1 Backend):

question: |
  Question 1: Trace the Flow
  When a user clicks "Submit" in your Free Response form, the 7 steps that happen are:

  The browser detects the click event on the "Submit" button.

  The form data is collected from the input fields.

  The frontend sends the data to the server via an HTTP request (usually POST).

  The server receives the request and routes it to the appropriate backend handler.

  The backend processes the data, performing validation or any business logic.

  The backend stores the data in the database.

  The server sends a response back to the frontend, which may display a success message or update the UI.

<textarea id='response' placeholder="Enter your answer(s) here" style="width: 25vw;"></textarea>
<br>
<button data-grade="true">Submit</button>

<script>
window.getLessonData = function() {
  const response = document.getElementById('response').value;
  return { response };
};
</script>