TV Show Quote App: Any Help Would be Greatly Appreciated!

[anthonyl]

Hi,

I’m building an app that generates quotes from a TV show, to which fans can test their knowledge of the show. e.g. who said it; from which episode, etc.

I’m having an issue with the level-selection. I have decided to have easy, medium and difficult settings.

For simplicity, I’ve only been working on one series at the moment, and when the code is right, I’ll apply it to the others.

There are three arrays:
seriesTenQuotesArrayEasy
seriesTenQuotesArrayMedium
seriesTenQuotesArrayDifficult

In short, how do I write a condition into the if / else if statement some that will trigger looping over the relevant arrays?

I’ve tried various things so far: declaring variables as onclick events; adding onchange and onclick into the HTML. And a few others.

Anyway, any help would be greatly appreciated.

The relevant HTML has three buttons for the level selection:

  <h3>Choose Your Difficulty</h3>
  <div class="container">
    <div class="row">
      <button class="levelOfDifficultyButtons" id="easy" value="easylevel" onchange="easylevel=true">Macho (Easy)</button>
    </div>
    <div class="row">
      <button class="levelOfDifficultyButtons" id="medium" value="mediumlevel" onchange="mediumlevel=true">Mucho Macho (Medium)</button>
    </div>
    <div class="row">
      <button class="levelOfDifficultyButtons" id="difficult">Nervosa Grande (Difficult)</button>
    </div>
  </div>
  <p id="levelOfDifficultyNote">*Note: Easy - Quotes reference key plot markers.
    <br><br>
    Medium: A mixture of quotes which reference key plot markers and quotes which do not.
    <br><br>
    Difficult: Includes the maximum number of quotes which do not reference key plot
    markers.
  </p>

And here’s the relevant JS:

seriesTenQuotes.onclick = function() {
  if (easylevel = true) {
    for (let i = 0; i < seriesTenQuotesArrayEasy.length; i++) {
      selectedQuoteArray.push(seriesTenQuotesArrayEasy[i]);
    }
  } else if (mediumlevel = true) {
    for (let i = 0; i < seriesTenQuotesArrayEasy.length; i++) {
      selectedQuoteArray.push(seriesTenQuotesArrayEasy[i]);
    }
    for (let i = 0; i < seriesTenQuotesArrayMedium.length; i++) {
      selectedQuoteArray.push(seriesTenQuotesArrayMedium[i]);
    }
 // More code would go here for the difficult-level; I'm just working on the easy and medium levels so far while I'm trying to find a way that works.
  }
  const seriesTenClicked = document.querySelector("#select-series-ten-button-quotes");
  seriesTenClicked.style.background = '#d02910';
  seriesTenClicked.style.color = '#ffffff';
  seriesTenClicked.disabled = true;
  seriesTenClicked.style.opacity = 0.5;
}

[anthonyl]

I’ll add that so far I have a working app that’s pretty good. If I don’t have a difficulty level, I don’t have any issues.

It’s just when I try to add the selection of an easy, medium or difficult level that I am getting stumped.

[Teller]

The user clicks on a button triggers a function.
Whatever parameter is passed to function calls the respective array.

Happy coding

[anthonyl]

Sounds like I’m going to have to use a different approach, then.

I’m trying to use filter at the moment after adding a

level: “easy”
or
level: “medium”
etc.

value to each quote, but it’s still not working. I’m assuming that’s because the filtered array is only available within the onclick function (?)

[lasjorg]

You are using assignments = in your if statement conditions, not comparisons ===

---

I would probably use a select element to set the difficulty and just have one button to start it.

[anthonyl]

Thanks. That’s poor from me. It’s a sign that I was fatigued when I wrote the post.

I had tested a variety of comparisons and other methods, and then, after many hours of it not working, decided I’d have to ask on the forum. I didn’t proof-read that well.

I’ve been able to get it to work with buttons simply by making the functions push quotes into an array, and making the buttons trigger different quotes at different levels.

I’ll revisit it, though, when the project is finished, because I feel that the code can be written in a more succinct way, maybe by using filter, or something similar.

I have tried filter, but I couldn’t get that to work, either.

This is the first project I’ve done on this scale, though, so I assume in a few months time I might be able to do quite easily some of these things I can’t do now. Well, we’ll see…

Having read a bit more about select elements, it seems that they would be easier because they are supposed to be assigned values, but buttons usually aren’t. I just don’t like select elements aesthetically on the page. However, I’ll give it a go while I play around with different things.

Thanks again