Allow click-event only if a boolean is true

Ionic Framework
1

Hello,
I have a little quiz, where a user needs to tab a button to select an answer. So each button has a click event calling the method “checkAnswer” where the boolean break is set to true. At the same time, the ion-content has a click event calling the method “nextQuestion”.
This method looks like that:

nextQuestion() {
    if(!this.break) {
      return;
    }
   ....
  }

Now If I don’t click a button, this works. but If I click a button, I go to the next question immediatly. But I want the click on the answer and the next click then gets me to the next question. It seems like the button-event is executed before the ion-content-event, which means break is set to true before nextQuestion can return.

How would I fix this?

2

You’re doing a couple things here that, while they aren’t strictly “illegal”, are guaranteed to cause whoever has to maintain this code (which is very likely you in a month or two) to tear their hair out.

I hope that smoothing out these design warts will have the happy side effect of making your problem vanish.

First, don’t use any of these keywords as property names (bye, bye, break).

Secondly, DOM event propagation is (to my eyes, at least) voodoo. So I recommend never having overlapping elements listening to the same event. In practice, this means that if a button has a (click) handler, nothing enclosing said button should. And it tends to lead to very unintuitive UI when arbitrary elements have click handlers.

So my first thought would be to have a “next question” button whose disabled status is keyed to whatever you decide to rename break to, and have that trigger nextQuestion, not clicks on the content.

3

Okay I renamed break. I had the system with a next button before but I want to have the next question If I click anywhere on the screen. How would I then add a button that has no background (ok fill="none") and that is over the whole ion-content that I can show then after a answer is selected

4

I found a solution myself:

<ion-button class="h-100 weiter" *ngIf="pause" (click)="nextPlayer()" fill="none">
    <h4 class="mb-4 continue">
      <ion-text color="orange">
        -- klicke um fortzufahren --
      </ion-text>
    </h4>
  </ion-button>

.continue {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.weiter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

But now I have a new problem… I fthe game is over I navigate to quiz-start. From there I then navigate back to quiz (after some user input) but When I then get back to the quiz-page, it isn’t resettet. Why?