oTree Forum >

Real time check on page

#1 by mimmo

I have an experiment in which, each period, subjects need to do a simple effort task (for say 30 sec.) and at the same time decide whether or not to pay a tax: if they decide to pay they need to copy a text code into a form field. I would like to give subjects a way to check that they have copied the code correctly during the 30 seconds period of each round while remaining on the page (see attachment). Is there a simple way to achieve this? Do I need a live page method (which I have never worked with)?
Thanks for any help,
mimmo

#2 by mimmo

Update.

I have tried the following:

<button type="button" class="btn btn-primary" onclick="checkCode()">Click here to check code</button>  </p>

<script>

    function checkCode() {
        let form = document.getElementById('form');
        let coded = forminputs.tax_code.value;
        let goal = js_vars.goal;
        let warnings = [];

        if (code === goal) {
            warnings.push("inserted code ok!");
        } else {
            warnings.push("code not correct!");
        }
        form.submit();
    }

</script>

Unfortunately, despite raising no exceptions, the popup window does not show. Any help would be really appreciated.
Thank you,

mimmo

#3 by BonnEconLab

You are not triggering any popup window. warnings.push(...) merely appends a new element to the warnings array. This should work:

if (code === goal) {
    warnings.push("inserted code ok!");
    alert("The inserted code was ok!");
} else {
    warnings.push("code not correct!");
    alert("The inserted code was incorrect!");
}

#4 by BonnEconLab

By the way, regarding the logic of your code, shouldn’t the

form.submit();

go into the if branch? That is,

if (code === goal) {
    warnings.push("inserted code ok!");
    alert("The inserted code was ok!");
    form.submit();
} else {
    warnings.push("code not correct!");
    alert("The inserted code was incorrect!");
}

#5 by mimmo

You are right, thank you. A different solution, if useful for other users, would be as follows:

<button type="button" class="btn btn-primary" onclick="isCodeCorrect()">Click here to check code</button>  </p>
<span id="notify"></span>
<script>

    let notifyEle = document.getElementById('notify');

    function isCodeCorrect() {
        let code = forminputs.tax_code.value;
            let goal = js_vars.goal;
        if (code === null)  {
            notifyEle.innerText = '';
        } else {
            if (code === goal){
                notifyEle.innerText = "code is ok";
            }
            else {
                notifyEle.innerText = "code NOT correct";
            }
        }
    }

</script>

whereby pressing the button activated a text field otherwise empty.
mimmo

Write a reply

Set forum username