Skip to content

Create a progress bar class #24

@richford

Description

@richford

Enhancement request:

We should create a class that can create and manage the progress bar in each of the apps (rather than managing them independently in each app. There is an open PR for PA that does this just for that app. Let's create a utility class in roar-utils instead.

  • Create a class called RoarProgressBar
  • It's constructor should accept numTrialsPerBlock, an array of numbers of trials for each block (e.g., for the current PA, we would have numTrialsPerBlock = [21, 21, 21] for the 19 test trials and 2 practice trials per block)
  • The constructor should use those block lengths to set the values of CSS variables that define the locations of the circles. See this page for how to set the value of CSS variables using javascript.
  • The constructor should also initialize which block the game is in this.currentBlock = 0.
  • It should have a method updateProgressBar to update the progress bar just like we have in the ROAR apps. In this method, it should also watch to see if we have incremented into a new block and if so, increment this.currentBlock and trigger the color change of the dots on the progress bar.
  • It should have a method completeCurrentBlock to complete the current block, set the progress bar appropriately, and increment this.currentBlock.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions