diff --git a/main.go b/main.go
index e08faf0..a5324f8 100644
--- a/main.go
+++ b/main.go
@@ -15,6 +15,7 @@ func main() {
questions := models.QuestionSet{
Questions: []models.Question{
{
+ ID: "1",
Text: "What is 1 + 1?",
Choices: []models.Choice{
{Text: "1"},
@@ -25,6 +26,7 @@ func main() {
Fact: "1 + 1 = 2",
},
{
+ ID: "2",
Text: "What is 3 * 5?",
Choices: []models.Choice{
{Text: "5"},
diff --git a/models/question.go b/models/question.go
index cab122a..a8aa05e 100644
--- a/models/question.go
+++ b/models/question.go
@@ -17,6 +17,7 @@ type Choice struct {
}
type Question struct {
+ ID string
Text string
Choices []Choice
Fact string
@@ -38,6 +39,7 @@ func (q Question) Render() (RenderedQuestion, error) {
}
return RenderedQuestion{
+ ID: q.ID,
Question: q.Text,
Fact: q.Fact,
Choices: choices,
@@ -51,6 +53,7 @@ type RenderedChoice struct {
}
type RenderedQuestion struct {
+ ID string
Question string
Fact string
Choices []RenderedChoice
diff --git a/public/scripts/controllers/clearstate.js b/public/scripts/controllers/clearstate.js
new file mode 100644
index 0000000..8fd2d27
--- /dev/null
+++ b/public/scripts/controllers/clearstate.js
@@ -0,0 +1,9 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import { gameState } from "./gamestate.js";
+
+export default class extends Controller {
+ startGame(ev) {
+ console.log("Start game");
+ gameState.clearChoices();
+ }
+}
\ No newline at end of file
diff --git a/public/scripts/controllers/gamestate.js b/public/scripts/controllers/gamestate.js
new file mode 100644
index 0000000..10e18cb
--- /dev/null
+++ b/public/scripts/controllers/gamestate.js
@@ -0,0 +1,32 @@
+const GAME_STATE_KEY = "gameState";
+
+class GameState {
+ getQuestionChoice(qId) {
+ let savedItem = this._readGameState();
+ if (qId in savedItem) {
+ return savedItem[qId];
+ }
+ return null;
+ }
+
+ setQuestionChoice(qId, cId) {
+ let savedItem = this._readGameState();
+ savedItem[qId] = cId;
+ localStorage.setItem(GAME_STATE_KEY, JSON.stringify(savedItem));
+ }
+
+ clearChoices() {
+ localStorage.removeItem(GAME_STATE_KEY);
+ }
+
+ _readGameState() {
+ let savedItem = localStorage.getItem(GAME_STATE_KEY);
+ if (savedItem === null) {
+ return {};
+ } else {
+ return JSON.parse(savedItem);
+ }
+ }
+}
+
+export let gameState = new GameState();
\ No newline at end of file
diff --git a/public/scripts/controllers/picker.js b/public/scripts/controllers/picker.js
index ba86c7b..c3f70e5 100644
--- a/public/scripts/controllers/picker.js
+++ b/public/scripts/controllers/picker.js
@@ -1,30 +1,57 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import { gameState } from "./gamestate.js";
export default class extends Controller {
- static targets = ["radio", "answerDetails"];
+ static targets = ["radio", "answerDetails", "submit"];
static values = {
+ qid: String,
answer: String
};
connect() {
+ let hasAnswer = gameState.getQuestionChoice(this.qidValue);
+ if (hasAnswer) {
+ this._revealAnswer();
+
+ let e = this.radioTargets.find((e) => e.value == hasAnswer);
+ if (e) {
+ e.checked = true;
+ }
+ }
+ }
+
+ checkRadio(ev) {
+ this.submitTarget.disabled = false;
}
submitAnswer(ev) {
ev.preventDefault();
+ this.submitTarget.disabled = false;
+ let e = this.radioTargets.find((e) => e.checked);
+ if (!e) {
+ alert("Please select an item");
+ return;
+ }
+
+ gameState.setQuestionChoice(this.qidValue, e.value);
+
+ this.element.classList.add("reveal");
+ window.setTimeout(() => { this._revealAnswer(); });
+ }
+
+ _revealAnswer() {
this.element.classList.add("reveal");
- window.setTimeout(() => {
- this.radioTargets.forEach(e => {
- e.disabled = true;
- if (e.value === this.answerValue) {
- e.classList.add("answer");
- } else {
- e.classList.add("wrong");
- }
- });
- }, 1);
+ this.radioTargets.forEach(e => {
+ e.disabled = true;
+ if (e.value === this.answerValue) {
+ e.classList.add("answer");
+ } else {
+ e.classList.add("wrong");
+ }
+ });
this.answerDetailsTarget.classList.remove("hidden");
}
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 5f4a3dc..56298f7 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -1,7 +1,9 @@
import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import ClearStateController from "./controllers/clearstate.js";
import PickerController from "./controllers/picker.js";
window.Stimulus = Application.start();
-Stimulus.register("picker", PickerController);
\ No newline at end of file
+Stimulus.register("picker", PickerController);
+Stimulus.register("clearstate", ClearStateController);
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 59dae3f..a31d0af 100644
--- a/public/style.css
+++ b/public/style.css
@@ -24,6 +24,7 @@ label:has(input[type=radio]) {
font-size: 0.9em;
font-weight: bold;
box-sizing: border-box;
+ cursor: pointer;
}
label:has(input[type=radio]):hover {
diff --git a/views/index.html b/views/index.html
index ed27459..b0c3646 100644
--- a/views/index.html
+++ b/views/index.html
@@ -2,4 +2,4 @@
Welcome to the quiz
-Lets go
\ No newline at end of file
+Lets go
\ No newline at end of file
diff --git a/views/layout.html b/views/layout.html
index 9d05c07..5fb9d87 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -6,6 +6,7 @@
+
{{embed}}
diff --git a/views/question.html b/views/question.html
index 14b3bd4..4f6a928 100644
--- a/views/question.html
+++ b/views/question.html
@@ -3,12 +3,13 @@
-