web/iswhoa
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Finished the results page

Browse source
This commit is contained in:
Leon Mika 2025-06-22 02:21:04 +02:00
parent d6b09e2305
commit 3107bd8a2f
5 changed files with 110 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
main.go
View file

@ -52,8 +52,8 @@ func main() {
app.Get("/", func(c *fiber.Ctx) error {
return c.Render("index", fiber.Map{})
})
app.Get("/end", func(c *fiber.Ctx) error {
return c.Render("end", fiber.Map{})
app.Get("/results", func(c *fiber.Ctx) error {
return c.Render("results", fiber.Map{})
})
app.Get("/:qid", func(c *fiber.Ctx) error {
qID, err := c.ParamsInt("qid")
@ -71,7 +71,7 @@ func main() {
return err
}
nextURL := prefix + "/end"
nextURL := prefix + "/results"
reachedEnd := true
if idx+1 < len(questions.Questions) {
nextURL = fmt.Sprintf("%v/%d", prefix, idx+2)

37
public/scripts/controllers/yourscore.js
View file

@ -2,9 +2,11 @@ import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.j
import { gameState } from "./gamestate.js";
const ANIMATION_DURATION = 1500.0;
const MAX_QUESTIONS = 10;
const CIRCLE_RADIUS = 50;
export default class extends Controller {
static targets = ['path', 'count'];
static targets = ['path', 'pathBack', 'count', 'postScore', 'rank'];
connect() {
this._startT = 0;
@ -13,41 +15,41 @@ export default class extends Controller {
}
_startAnimating(t) {
this._finalScore = 3;
this._finalScore = 10;
this._startT = t;
this._finalArcPostition = 360 * this._finalScore / 10;
this._updateCounterEvery = ANIMATION_DURATION / this._finalScore;
this._updateCounterAt = 0;
this._finalArcPostition = 360 * this._finalScore / MAX_QUESTIONS;
this._currentlyDisplayedScore = 0;
this.countTarget.innerText = "0";
this.countTarget.innerText = "0%";
requestAnimationFrame(this._animateFrame.bind(this));
}
_animateFrame(t) {
let tt = t - this._startT;
let tScaled = tt / ANIMATION_DURATION;
if (tt >= ANIMATION_DURATION) {
if (this._finalArcPostition == 360) {
this.pathTarget.setAttribute("d", this._describeCircle(50, 50, 45));
this.pathTarget.setAttribute("d", this._describeCircle(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS - 5));
} else {
this.pathTarget.setAttribute("d", this._describeArc(50, 50, 45, 0, this._finalArcPostition));
this.pathTarget.setAttribute("d", this._describeArc(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS - 5, 0, this._finalArcPostition));
}
this.countTarget.innerText = this._finalScore.toString();
let scoreToDisplay = (this._finalScore * 100 / MAX_QUESTIONS) | 0;
this.countTarget.innerText = `${scoreToDisplay}%`;
window.setTimeout(() => this._showPostStore(), 1);
return;
}
let arcT = Math.sin(tt / ANIMATION_DURATION * Math.PI / 2.0);
this.pathTarget.setAttribute("d", this._describeArc(50, 50, 45, 0, this._finalArcPostition * arcT));
this.pathTarget.setAttribute("d", this._describeArc(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS - 5, 0, this._finalArcPostition * arcT));
if (tt >= this._updateCounterAt) {
this._currentlyDisplayedScore++;
this.countTarget.innerText = this._currentlyDisplayedScore.toString();
this._updateCounterAt += this._updateCounterEvery;
let scoreToDisplay = (arcT * this._finalScore * 100 / MAX_QUESTIONS) | 0;
if (scoreToDisplay != this._currentlyDisplayedScore) {
this._currentlyDisplayedScore = scoreToDisplay;
this.countTarget.innerText = `${scoreToDisplay}%`;
}
requestAnimationFrame(this._animateFrame.bind(this));
@ -87,4 +89,9 @@ export default class extends Controller {
return d;
}
_showPostStore() {
this.rankTarget.innerText = "Developer";
this.postScoreTarget.classList.remove("hidden");
}
}

63
public/style.css
View file

@ -1,3 +1,7 @@
:root {
--score-color: green;
}
div.offscreen {
position: fixed;
left: -100px;
@ -85,6 +89,65 @@ input[type=radio] {
display: none !important;
}
.vspacer {
height: 2em;
}
/**
* Your score
*/
div.score-wrapper {
text-align: center;
}
div.yourscore {
margin-inline: auto;
position: relative;
text-align: left;
width: 250px;
height: 250px;
}
div.yourscore svg {
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
}
div.yourscore svg path {
stroke: #ccc;
}
div.yourscore svg path.score {
stroke: var(--score-color);
}
div.yourscore .counter {
position: absolute;
font-size: 4em;
top: calc(50% - 0.75em);
left: 0;
width: 100%;
text-align: center;
color: var(--score-color);
z-index: 10;
}
div.post-score {
margin-block-start: 2em;
}
div.rank {
font-size: 1.5em;
text-align: center;
}
/**
* Page transition
*/

12
views/end.html
View file

@ -1,12 +0,0 @@
<h1>Well Done</h1>
<p>You reached the end</p>
<div data-controller="yourscore">
<svg xml:space="preserve" id="svg2" x="0" y="0" version="1.1" viewBox="0 0 100 100">
<g transform="rotate(90,50,50)">
<path data-yourscore-target="path" fill="none" stroke="#f8f8f8" stroke-width="10"/>
</g>
</svg>
<div data-yourscore-target="count">0</div>
</div>

22
views/results.html Normal file
View file

@ -0,0 +1,22 @@
<h1>Results</h1>
<div data-controller="yourscore" class="score-wrapper">
<p>Your final score is</p>
<div>
<div class="yourscore">
<svg xml:space="preserve" id="svg2" x="0" y="0" version="1.1" viewBox="0 0 100 100">
<g transform="rotate(90,50,50)">
<path data-yourscore-target="pathBack" fill="none" stroke-width="10" d="M 5 50 A 45 45 0 0 0 95 50 A 45 45 0 1 0 5 50"/>
<path data-yourscore-target="path" fill="none" stroke-width="10" class="score"/>
</g>
</svg>
<div data-yourscore-target="count" class="counter">0%</div>
</div>
</div>
<div data-yourscore-target="postScore" class="post-score hidden">
<div>You achieved a rank of</div>
<div data-yourscore-target="rank" class="rank"></div>
<div class="vspacer"></div>
<a href="{{prefix}}/end" class="button">Continue</a>
</div>
</div>