Players take a quiz. Scores go to Sutrena. A dashboard shows the top 20. No backend.
Updated March 2026
A quiz page, a leaderboard, no backend to maintain. Players submit their name and score. A dashboard shows who is ahead. The quiz runs in the browser. Sutrena stores the scores. A data table sorted by score gives you a top-20 leaderboard that refreshes every 30 seconds. Put it on a projector at an event or share the link. An agent can set this up end-to-end: create the form with score validation, build the leaderboard dashboard, deploy the quiz page.
Architecture
| Tool | Role | Cost |
|---|---|---|
| Cloudflare Pages | Static site hosting | Free |
| Sutrena | Score storage, leaderboard dashboard | $9/mo (Builder) |
Total cost: $9/mo
Builder starts at $9/month for 50 projects. Pro at $29/month covers 200 projects and all your other work too. Build five blueprints on Pro and it is still $29/month. That is where the value is — at scale.
The quiz logic is all client-side JavaScript. When a player finishes, your code calculates the score and POSTs it to Sutrena along with the player name.
The dashboard has a data_table sorted by score descending, limited to 20 rows. That is your leaderboard. A metric_card shows total players. The public dashboard URL can go on a screen at events or in a group chat.
Form Definition
Player name and a numeric score (0-100). publicResults is on so the leaderboard dashboard is viewable by anyone.
{
"name": "Quiz Scores",
"fields": [
{
"name": "player_name",
"label": "Player Name",
"type": "text",
"required": true
},
{
"name": "score",
"label": "Score",
"type": "number",
"required": true,
"min": 0,
"max": 100
}
],
"publicResults": true
}Dashboard Definition
Two widgets: total player count and a table showing the top 20 scores. The dashboard auto-refreshes every 30 seconds.
{
"version": 1,
"widgets": [
{
"type": "metric_card",
"title": "Total Players",
"value": "count(*)"
},
{
"type": "data_table",
"title": "Leaderboard - Top 20",
"columns": [
"player_name",
"score"
],
"limit": 20,
"sortBy": "score",
"sortOrder": "desc"
}
]
}Frontend Integration
An HTML page that scores the quiz in the browser and sends the result to Sutrena. The leaderboard link points to the public dashboard. Replace the form ID and dashboard ID with yours.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Quiz</title>
</head>
<body>
<h1>Quick Quiz</h1>
<form id="quiz-form">
<label>
Your Name
<input name="player_name" required />
</label>
<p>1. What is 2 + 2?</p>
<label><input type="radio" name="q1" value="4" /> 4</label>
<label><input type="radio" name="q1" value="5" /> 5</label>
<p>2. Capital of France?</p>
<label><input type="radio" name="q2" value="Paris" /> Paris</label>
<label><input type="radio" name="q2" value="London" /> London</label>
<button type="submit">Submit</button>
</form>
<p id="result"></p>
<p><a href="https://sutrena.com/d/dsh_YOUR_DASHBOARD_ID">View Leaderboard</a></p>
<script>
const FORM_ID = "frm_YOUR_FORM_ID";
const answers = { q1: "4", q2: "Paris" };
document.getElementById("quiz-form").addEventListener("submit", async (e) => {
e.preventDefault();
const fd = new FormData(e.target);
let score = 0;
if (fd.get("q1") === answers.q1) score += 50;
if (fd.get("q2") === answers.q2) score += 50;
const res = await fetch(
`https://sutrena.com/api/forms/${FORM_ID}/submit`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
player_name: fd.get("player_name"),
score: score,
}),
}
);
if (res.ok) {
document.getElementById("result").textContent =
`Score: ${score}/100. Check the leaderboard!`;
}
});
</script>
</body>
</html>Scoring is client-side, so yes, they can. For casual quizzes this is fine. For anything competitive, you would need a Cloudflare Worker that checks answers server-side before sending the score to Sutrena. Tradeoff: more work, more honest results.
Add uniqueBy: ["player_name"] to the form. Same name cannot submit twice. For stricter dedup, use email or a Clerk user_id instead.
The public dashboard refreshes every 30 seconds. Scores show up within that window.
As many as you want. The quiz logic lives in your frontend. The form only receives the final score.
Sutrena is the web runtime for AI agents. Three primitives — pages, forms, and dashboards — accessible through one API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Framework-agnostic. Works from any MCP client or HTTP client.
1. Get a trial key (no auth, no signup)
curl -X POST https://sutrena.com/api/trial2. Create a form + dashboard from a template
curl -X POST https://sutrena.com/api/forms \
-H "Authorization: Bearer st_trial_xxx" \
-H "Content-Type: application/json" \
-d '{"templateId": "waitlist", "createDashboard": true}'Get a trial API key instantly with no signup, or create an account for the full experience.