How to lock content until user does a task?

Question

I am currently developing a “course” platform, and I want to prevent the user from advancing to the next topic until they click the last item on the current topic.

In this first activity I want that the next button is disabled or something like that until the user downloads the file, so clicks on the download image.

I assume it will be with JavaScript by changing the value on the HTML item with a getElementByID or with an eventListener, but I am not clear on how to proceed.

I am not using input fields so I can't use disabled. I am using images inside of an tag as it shows here:

Do you guys know how can I do this?

Using jQuery. It is very simple to change status of an element when user clicking another element — user16806454, Nov 30 '21 at 01:19
Thank you for informing me, do you know the exact name of the plug-in or how can I look for it? I haven’t used jQuery before — Diego Fonseca, Nov 30 '21 at 01:23

score 0 · Answer 1 · answered Nov 30 '21 at 02:00

<body>
<input type="button" id="button1" value="Task 1" 
onclick="unlockButton()" />
<input type="button" id="button2" value="Task 2" disabled />
<script>
    function unlockButton() {
        document.getElementById("button2").disabled = false;
    }
</script>

How to lock content until user does a task?

1 Answers1