iswhoa/public/scripts/controllers/picker.js

import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
import { gameState } from "./gamestate.js";

export default class extends Controller {
    static targets = ["radio", "submitButton", "answerDetails", "submit", "result"];

    static values = {
        qid: String,
        answer: String
    };

    connect() {
        let hasAnswer = gameState.getQuestionChoice(this.qidValue);
        if (hasAnswer) {
            this._revealAnswer(hasAnswer.isRight);

            let e = this.radioTargets.find((e) => e.value == hasAnswer.cId);
            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;
        }

        let wasRight = e.value === this.answerValue;
        gameState.setQuestionChoice(this.qidValue, e.value, wasRight);

        this.element.classList.add("reveal");
        window.setTimeout(() => { this._revealAnswer(wasRight); });
    }

    _revealAnswer(wasRight) {        
        this.element.classList.add("reveal");

        this.radioTargets.forEach(e => { 
            e.disabled = true;
            if (e.value === this.answerValue) {
                e.classList.add("answer");                
            } else {
                e.classList.add("wrong");
            }
        });

        if (wasRight) {
            this.resultTarget.innerText = "Correct";
        } else {
            this.resultTarget.innerText = "Sorry, that's incorrect";
        }

        this.submitButtonTarget.classList.add("hidden");
        this.answerDetailsTarget.classList.remove("hidden");
    }
};