How do i add conditional button function in html?

Question

Im a newbie trying to make a progressive website. I want the users to go through 7 tests on each level and only if they complete 4/7 tests successfully will they be allowed to progress to the next level (webpage). How do i add this condition check of 4/7 successful completions to my button which will take the user to the next page?

Answer 1

Set the button's display to none in css

#buttonToNextPage{
    display : none;
}

Using a variable in javascript to keep track of the number of tests your user has answered. The variable can start from 1 and go upto 4

var testAnswered = 1;

Every time the user answers a new test, you can increment the number by 1 by triggering a function. After incrementing, within the function u should check if the value has reached 4.If yes, you display the button using javascript. The function must look something like this:

function newTestAnswered(){
    testAnswered = testAnswered + 1;
    if(testAnswered == 4){
        document.querySelector('#buttonToNextPage').style.display = block;
    }
}

Hope this helped☺