Storing information from HTML variables in internal variables

Question

Dear SoSci community,

I am sure I am overlooking something obvious.

The goal is very simple: My participants click on a button to rotate between different image examples. I would like to save the number of times the participants clicked on the button into an internal variable.

My code works, but only when I insert my variable ‘IV02_01’ using PHP code, not when I drag my ‘internal variable’ block onto the same page in my questionnaire. When I use the block, my data set always saves a ‘0’, while the PHP code saves the correct number of clicks. What am I missing?

PHP-Code in question: prepare_input('IV02_01');

My current HTML- code is as follows:

<input type="hidden" name="IV02_01" id="IV02_01" value="0">

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup>
    <col width="2%">
    <col width="96%">
    <col width="2%">
</colgroup>
<tr>
    <td></td>
    <td>
        <div class="image-container" style="text-align: center">
            <img id="mainImage" src="p00_00.jpg" alt="Image description" style="max-width: 100%;">
        </div>
    </td>
    <td></td>
</tr>
</table>

<div class="button-container" style="text-align: center; margin-top: 20px; margin-bottom: 40px;">
    <button id="nextImageButton" type="button" style="padding: 10px 20px; font-size: 22px; background-color: #fca503; color: white; border: none; border-radius: 5px; cursor: pointer;">
        Show next prediction
    </button>
</div>

<script>
    // --- Image list ---
    const images = [
        "pXAI_00.jpg", "pXAI_01.jpg", "pXAI_02.jpg", "pXAI_03.jpg",
        "pXAI_04.jpg", "pXAI_05.jpg", "pXAI_06.jpg", "pXAI_07.jpg",
        "pXAI_08.jpg", "pXAI_09.jpg", "pXAI_10.jpg", "pXAI_11.jpg",
        "pXAI_12.jpg", "pXAI_13.jpg", "pXAI_14.jpg"
    ];

    let currentIndex = 0;
    let buttonPressCount = 0;

    function showNextImage(event) {
        event.preventDefault();

        // Increment counter
        buttonPressCount++;

        // Update image
        currentIndex = (currentIndex + 1) % images.length;
        document.getElementById("mainImage").src = images[currentIndex];

        //Save counter value to SoSci internal variable
        document.getElementById("IV02_01").value = buttonPressCount;
    }

    // Attach button click handler
    document.getElementById("nextImageButton").addEventListener("click", showNextImage);
</script>

IV02_01:

I am looking forward to your support. Thank you very much!
Kind regards

Answer 1

Please drag the IV02 question into the page, then remove

prepare_input('IV02_01');

and also

<input type="hidden" name="IV02_01" id="IV02_01" value="0">

because this would create a second hidden input, preventing the first one from working properly. Below the IV02 question on the same questionnaire page, place your other JavaScript code.

If you want to preset 0, you can use the following PHP code above the question.

preset('IV01_01', '0');

Comments

Thank you very much for your help. That's the solution.

Just a quick note for anyone who reads this, because I realised I forgot to mention this in my original post: I didn't want to import my variable using PHP code, because this left a yellow comment on the survey page. The new implementation doesn't do this.

This post can be closed for me.