[Play] - Remove PHASE_RESULTS and relocate score card to PHASE_DISCUSS

[drewjhart]

Issue: General

Overview

Currently, player scores are communicated to them via the score during the PHASE_RESULTS phase of the game (on play). The UI is below:

💅

Note that the card shows if a player answered the question correctly, and then their score is updated via an animation in the footer.

Based on feedback received during the Carver classroom sessions, the Design team has proposed moving the score card into the PHASE_RESULT page instead. Here is a sketch that they have prepared to communicate this:

Their complete feedback on this can be found in this document: https://docs.google.com/document/d/1qrd4EKozYLYnbKpVRjA-ysuClvETTKHWXHWgOJXKubQ/edit , in the "Enhancements" section, specifically under: "Considerations for V2"

Complexity

While the UI change is straight forward, the PHASE_RESULTS page is also doing a lot of background work to calculate the player's score at the moment (note: that this is where the score is updated in the footer).

This can be seen in play/src/pages/PhaseResults.tsx, particularly in this section:

  // calculate new score for use in footer
  // using useEffect here because scoreindicator causes parent rerenders as it listens to newScore while animating
  useEffect(() => {
    let calcNewScore = 0;
    if (!hasRejoined) {
      calcNewScore = ModelHelper.calculateBasicModeScoreForQuestion(
        gameSession,
        currentQuestion,
        currentTeam!, // eslint-disable-line @typescript-eslint/no-non-null-assertion
        isShortAnswerEnabled
      );
    }
    updateTeamScore(teamId, calcNewScore);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

We'll need to consider implications of moving these calculations both on play and host

Task:

The specific task is as follows:

1. Review the code and understand how difficult it will be to move the scoring over
2. Move UI elements
3. Refactor animation code to trigger from PHASE_DISCUSS
4. Refactor score calculation so that it can be computed during PHASE_DISCUSS

[sincwu]

Great summary, Drew! Olivia (who's been on point on this issue from Design) and I spoke on Friday:

• She found some updated mockups in Figma (hat tip to Yong Lin) that depict the preferred layout (the hand-drawn one above was naturally just an early sketch); that Figma link and additional details can also be found in the Google Doc linked above
• In Figma (same link as above bullet point), Olivia has included a couple pretty cool flowcharts that depict the current flow and the desired, more streamlined one
• She's planning to update her charts/notes by Monday, 6/10; adding her here
• Hi Kelly and Olivia, please feel free to share updates here in Github and/or connect over Zoom if you have any questions/updates for each other!

[OliviaKnestaut]

Overview

• A detailed write-up on the enhancement can be found here
• Figma information on this enhancement can be found here
• Figma designs are for incorporation into Host and Play V1 as they currently exist
  • This should allow them be be transferred into host V2 in time, but the current designs are not for host V2
• Because these screens run in lock-step with the host screens, there needs to be a combination of screens on the host side as well.
  • We are removing one step from both the host and play sides to streamline the game and prevent user error on the host side

Flow Changes

Discuss Phase Play Mockup:

Discuss Phase Host Mockup:

Note: it is important that this screen has something visibly different from the previous host screen to eliminate the issue of teachers accidentally clicking through. This is why I incorporated the student screen preview at the top of the page. I am open to other suggestions for solutions to this issue.

[drewjhart]

Sweet write up on this, Olivia. I love how thorough and organized all that information is. Makes it very clear to see what dev needs to do.

While the UI changes are straightforward, there's some thinking required on the technical side for how to handle delays required for scoring calculations. Kelly is out of office this week as she's writing finals but I will connect with her when she's back and we'll reach out with any further questions.

Thanks again!

[kellycouvrette]

Hi @OliviaKnestaut , thanks for putting together such great documentation! Really helps clarify the issue. I just got off a call with Drew and we came up with a couple of questions about this task.

1. When we display the correct answer card (the one that would have been on the results page but got moved over) are we still having the text that says "Choose the Correct Answer" and the 'Submit Answer' button? The Figma shows the card with the text and button but the card on the results page that is getting deleted does not have that text and button.
2. Will we be doing a similar change for Phase 2 (when there are incorrect answer explanations also on the screen)? It seems like we will be getting rid of the results page for Phase 2 so we'll need some help from the design team on how this will change the design of the 'Answer Explanations' page for Phase 2.

Thanks again!

[kellycouvrette]

Heres a picture of the two different correct answer cards for my question #1

[OliviaKnestaut]

Hi @kellycouvrette, sorry it took me some time to get back to you, I was off yesterday!

1. There should not be a "choose your answer" title and "submit" button. That is my bad, I accidentally put in the wrong component on Figma. It is updated now, with the correct card (the one that was previously on the results page).
   

2. I just wrapped up the Phase 2 mockups. They are in the same location in Figma as the other mockups.
   Play Phase 2 on PC
   

Play Phase 2 on Mobile

Host Phase 2 on PC

Feel free to send any other questions you may have as you implement these changes 😊

[OliviaKnestaut]

Most Recent Enhancement 1 Updates!

Figma

The UX Team made some decisions to change around some of the phase 2 cards for a more streamlined flow. These new changes are as follows:

1. Swapped the Correct Answer Steps and Results boxes
   • This decision was driven by the desire to make the scoring easier to understand at first glance. When a user reaches the page the score animation will play, so it is important that it is easy to see where the points are coming from (i.e. having the results box as one of the first boxes)
   • Additionally, the correct answer steps were already reviewed in Phase 1, so while this content is important it may be redundant for some users. Putting it in the 3rd column allows users who need it to access it, while users who don't can easily ignore it.
2. Changed column titles to match swapped cards.
   • The new column titles should be:
     • Question and Results
     • Incorrect Answers
     • Correct Answer
3. Changed Phase 2 scoring coloring to create a stronger connection between the answer chosen and the points awarded
   • For Phase 2 the dot that appears next to the chosen answer will now be purple as will the score animation. Previously the blue dot did not create a clear connection to the green score animation.