JavaScript Express Basics Parameters, Query Strings, and Modularizing Routes Randomize Cards

Remi Vledder
Remi Vledder
12,720 Points

Express: Possible to redirect to a random card page that does not have the current cards page ID?

During the course you are building a route for flash cards.

In the chapter "Parameters, Query Strings, and Modularizing Routes" you have a setup where if you land on the page "http://localhost:3000/cards/" you get redirected to a card detail page based on a random number between 0-4, like: "http://localhost:3000/cards/3?side=question".

Additional, a "Next card" anchor button is added on the card detail page. That button is using a href="/card". This means that it leverages above solution, and thus redirects again to a random card detail page.

However, it occurs quite often that you are redirected to the same card page as to which you are on. Meaning that if you're on the page of card 3, you land on that same card page.

What would be the best way to make it redirect always to a card page between 1-4 and NOT the current page's ID?

Remi Vledder
Remi Vledder
12,720 Points

Is it for example possible to check the a parameter has already been added in a referrer URL? Or would something like this typically be set in a cookie?

2 Answers

Ruben Ponce
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,033 Points

I see what you're saying. My solution to that would be to declare a letvariable to hold a value before being redirected, then use while loop to keep geep generating random Ids to be used in the url.

Something like this:

let idParameter = getRandomId();

let idFlashcard

while(idFlashcard===idParameter){

idParameter = generateRandomId();

}

idFlashcard= idParameter;```
Remi Vledder
Remi Vledder
12,720 Points

Interesting. In this case, where would the idFlashCard come from?

Ruben Ponce
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,033 Points

idFlashCard will be set equal to the parameter when at the END of the idParameter after the page has been rendered. The logic should be possible the implement. I don't think the case where you render a independent urls randomly is a common one, and by the time it is there would be a tool out there to automate it for you.

Remi Vledder
Remi Vledder
12,720 Points

And how about the initial value of the flashcardId? (it throws a 'flashcardId is not defined' error).

Remi Vledder
Remi Vledder
12,720 Points

By using a cookie perhaps something like this:

router.get('/', (req, res) => {

  function randomNumber(min, max) {
    return Math.floor(Math.random() * max) + min;
  }

  const numberOfCards = cards.length;
  const referrerCardId = parseInt(req.cookies.cardId);

  let flashcardId = randomNumber(0, numberOfCards);

  // when cookie is set check to see whether or not the current cards id is the same as new generated flascard id
  if (referrerCardId) {
    // true when referrer card id is the same as random flashcard id
    const idIsCurrentId = flashcardId === referrerCardId;
    // true when it's the last card (may only count to maximum number of cards in JSON file)
    const lastCard = flashcardId === numberOfCards - 1;

    if (idIsCurrentId && lastCard) {
      flashcardId -= 1;
    } else if (idIsCurrentId && !lastCard) {
      flashcardId += 1;
    }
  }

  res.redirect(`/cards/${flashcardId}`);
});

Then in the next route that this previous route is redirecting to:

router.get('/:id', (req, res) => {
  const { side } = req.query;
  const { id } = req.params;

  if ( !side ) {
    return res.redirect(`/cards/${id}?side=question`)
  }

  // set the cookie
  res.cookie('cardId', id);

  // ...

  res.render('card', templateData );
});
Remi Vledder
Remi Vledder
12,720 Points

Still not sure if a cookie is the way this should crumble though...