Skip to content

Star Rating MicroSim

Run the MicroSim Edit this MicroSim

About this MicroSim

This MicroSim demonstrates an interactive star rating system with five stars and a slider control. It teaches concepts of: - Interactive UI controls - Responsive design - Visual feedback - User input handling

Features

  • Five horizontal stars displayed using the ★ character
  • Slider control to adjust the rating from 1 to 5 stars
  • Default value of 3 stars
  • Visual feedback showing the current rating
  • Responsive design that adapts to container width
  • Accessible interface with screen reader support

Lesson Plan

Grade Level, Subject and Topic

Middle school to high school, Computer Science/Programming, User Interface Design

Activities

Star Rating Basics

  1. Observe how the stars change color based on the slider position
  2. Notice the numerical rating display below the stars
  3. Experiment with different rating values

Visual Design

  1. Discuss the use of colors (gold for active stars, gray for inactive)
  2. Examine the spacing and sizing of the stars
  3. Consider the placement of the slider and rating display

Interactive Elements

  1. Explore how the slider affects the star display
  2. Notice the smooth transitions between states
  3. Test the responsive behavior by resizing the window

Accessibility

  1. Use screen readers to understand how the interface is described
  2. Discuss the importance of clear visual feedback
  3. Consider alternative input methods for users with different needs

Technical Details

The MicroSim is built using: - p5.js for graphics and interaction - Responsive canvas sizing - Standardized layout structure - Accessible controls and descriptions

References