Main.html

{{ block content }}

<header>
    <ot-progress ticks="1" max="vars.progress.total" value="vars.progress.completed" value2="vars.progress.current"></ot-progress>
    <div class="d-flex">
        <div class="alert alert-secondary otree-timer-custom m-2">Time left: <b class="otree-timer__time-left">0:00</b></div>
        <div class="alert alert-secondary m-2">Total score: <b ot-text="vars.progress.score"></b></div>
    </div>
    <p id="gain">You <i ot-text="vars.gain_txt"></i></p>
</header>

<main id="main" class="ot-fade d-flex" hidden>
    <div class="fs-1 m-3">
        <span ot-text="vars.trial.expression"></span> = ...
    </div>

    <div class="d-flex flex-row gap-3">
        <div class="form-check">
            <input id="choice-1" ot-input type="radio" name="answer" value="1" class="form-check-input" ot-class="vars.styles.1">
            <label for="choice-1" class="form-check-label" ot-text="vars.trial.options.1"></label>
        </div>
        <div class="form-check">
            <input id="choice-2" ot-input type="radio" name="answer" value="2" class="form-check-input" ot-class="vars.styles.2">
            <label for="choice-2" class="form-check-label" ot-text="vars.trial.options.2"></label>
        </div>
        <div class="form-check">
            <input id="choice-3" ot-input type="radio" name="answer" value="3" class="form-check-input" ot-class="vars.styles.3">
            <label for="choice-3" class="form-check-label" ot-text="vars.trial.options.3"></label>
        </div>
        <div class="form-check">
            <input id="choice-4" ot-input type="radio" name="answer" value="4" class="form-check-input" ot-class="vars.styles.4">
            <label for="choice-4" class="form-check-label" ot-text="vars.trial.options.4"></label>
        </div>
    </div>

    <button type="button" class="btn btn-primary m-3" ot-click-input name="submit">Submit</button>
</main>

<footer>
    <p id="prompt">Choose an option with your solution and press <kbd>Submit</kbd>.</p>
    <ot-pulse id="waiting" hidden></ot-pulse>
</footer>

{{ endblock }}

{{ block styles }}
<link rel="stylesheet" href="{{ static 'fullscreen.css' }}">
<link rel="stylesheet" href="{{ static 'otree-front-ext.css' }}">
<link rel="stylesheet" href="{{ static 'ot-progress.css' }}">
<link rel="stylesheet" href="{{ static 'ot-pulse.css' }}">
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'otree-front-2.0.b2.js' }}"></script>
<script src="{{ static 'otree-front-ext.js' }}"></script>
<script src="{{ static 'otree-front-live.js' }}"></script>
<script src="{{ static 'ot-progress.js' }}"></script>
<script src="{{ static 'ot-pulse.js' }}"></script>
<script src="{{ static 'format_score.js' }}"></script>

<script>
    "use strict";

    const FEEDBACK_DELAY = js_vars.C.FEEDBACK_DELAY;
    const FADEOUT_TIME = parseInt(getStyleProp("--ot-fade-out-time"));

    onLoad(startGame);
    onLive('progress', updateProgress);
    onLive('trial', startTrial);
    onInput('answer', inputAnswer);
    onInput('submit', submitAnswer);
    onLive('feedback', liveFeedback);
    onLive('failure', function (message) { alert(message); ot.completePage(); });

    function startGame() {
        vars.progress = {};
        nextIter();
    };

    function updateProgress(data) {
        Object.assign(vars.progress, data);
    };

    function nextIter() {
        resetTrial();

        if (vars.progress.terminated) {
            ot.completePage();
        } else {
            sendLive('next');
        }
    }

    function resetTrial() {
        vars.trial = null;
        vars.choice = null;
        vars.answer = null;
        vars.feedback = null;
        clearChoice();
        hideFeedback();
        ot.resetInputs();
        ot.disableInputs();
        ot.updatePage();
    }

    function startTrial(data) {
        vars.trial = data;

        ot.showDisplay("main");
        ot.showDisplay("prompt");

        ot.enableInputs("answer"); // NB: submit remains disabled
        ot.beginTimeMeasurement();
        ot.updatePage();
    }

    function inputAnswer(position) {
        vars.choice = Number(position);
        vars.answer = vars.trial.options[position];
        ot.enableInput("submit");
    }

    function submitAnswer() {
        ot.disableInputs();

        ot.hideDisplay("prompt");
        highlightChoice();

        sendLive('response', {
            iteration: vars.trial.iteration,
            time: ot.getTimeMeasurement(),
            answer: vars.answer
        });
    };


    async function liveFeedback(data) {
        vars.feedback = data;

        ot.showDisplay("waiting");
        showFeedback();
        await ot.delay(FEEDBACK_DELAY);
        hideFeedback();
        ot.hideDisplay("waiting");

        completeTrial();
    };

    async function completeTrial() {
        ot.hideDisplay("main");
        await ot.delay(FADEOUT_TIME);
        nextIter();
    }

    function hideFeedback() {
        ot.hideDisplay("gain");
        vars.gain_txt = null;
    }

    function showFeedback() {
        ot.showDisplay("gain");
        vars.gain_txt = format_gain(vars.feedback.score);
        vars.styles[vars.choice] = vars.feedback.success ? ["selected", "is-valid"] : ["selected", "is-invalid"];
    }

    function clearChoice() {
        vars.styles = {
            1: "text-primary",
            2: "text-primary",
            3: "text-primary",
            4: "text-primary",
        }
    }

    function highlightChoice() {
        vars.styles = {
            1: "text-secondary",
            2: "text-secondary",
            3: "text-secondary",
            4: "text-secondary",
        }
        vars.styles[vars.choice] = ["selected", "text-dark"];
    }

</script>
{{ endblock }}