繁體中文 English

Supported Question Widgets

Hoppy supports a variety of interactive widgets for creating engaging educational questions. Explore the different visualization types available for quiz content.

🕐

Analog Clock

Interactive analog clock display with hour and minute hands. Optional second hand for precise time questions.

Live Examples
Analog clock selection question
Analog to digital clock conversion
Widget Variations
Analog Clock without seconds Without Second Hand
Analog Clock with seconds With Second Hand
⏰

Digital Clock

7-segment digital clock display supporting both 12-hour (AM/PM) and 24-hour formats.

Live Examples
Digital clock multiple choice question
Widget Variations
Digital Clock 12-hour format 12-Hour Format (AM/PM)
Digital Clock 24-hour format 24-Hour Format
📊

Bar Chart

Vertical bar chart with configurable axes, labels, and values. Perfect for data interpretation questions.

Live Examples
Bar chart temperature question
Widget Variations
Bar Chart Widget Quarterly Sales Example
📊

Stacked Bar Chart

Vertical stacked bar chart with multiple data series. Supports up to 4 series with automatic color assignment and legend.

Live Examples
Stacked bar chart household expenses question
Stacked bar chart activity participation
Widget Variations
Stacked Bar Chart Widget Quarterly Revenue by Product
📉

Broken Line Graph

Line chart where data points are connected by straight line segments. Supports multiple series with different colors for trend comparison.

Live Examples
Broken line graph daily steps question
Broken line graph weekly temperature
Widget Variations
Broken Line Graph - Single Series Single Series (Temperature)
Broken Line Graph - Multiple Series Multiple Series (Comparison)
📈

Box Whisker Plot

Statistical box-and-whisker plot showing five-number summary: smallest, Q1, median, Q3, and largest values.

Live Examples
Box whisker IQR question
Widget Variations
Box Whisker Plot Widget Score Distribution Example
📐

Equation Graph

Mathematical function plotter supporting LaTeX notation. Display single or multiple equations with customizable colors and axes.

Live Examples
Linear inequality graph
Simultaneous equations
Logarithmic functions
Widget Variations
Sine Graph sin(x)
Sine and Cosine Graph sin(x) & cos(x)
Parabola Graph x²
🔷

3D Shapes

Interactive 3D geometric shapes with perspective projection. Supports various polyhedra including tetrahedra, cubes, prisms, pyramids, and octahedra with labeled vertices and automatic hidden-edge detection.

Live Examples
Tetrahedron faces question
Rectangular prism vertices question
Hexagonal prism vertices question
Widget Variations
Tetrahedron Tetrahedron
Cube Cube
Square Pyramid Square Pyramid
Triangular Prism Triangular Prism
Octahedron Octahedron
Tetrahedron with Reference Points With Reference Points
⚡

Electric Circuit

Interactive electric circuit diagrams with batteries, resistors, bulbs, switches, ammeters, voltmeters, and wire connections. Supports series and parallel circuits with automatic junction detection.

Supported Components
🔋 Battery
▭ Resistor
💡 Bulb
⏻ Switch
Ⓐ Ammeter
Ⓥ Voltmeter
Widget Variations
Electric Circuit Widget Simple Series Circuit
Features
  • Grid-based node positioning for flexible circuit layouts
  • Polarity markers for batteries and switches
  • Automatic orientation calculation (horizontal, vertical, diagonal)
  • External terminals for open/incomplete circuits
  • Automatic junction dots where more than 2 wires connect
🧪

Chemical Equation

Render chemical equations with proper subscripts, superscripts, and reaction arrows. Perfect for chemistry questions involving reactions, balancing equations, and stoichiometry.

Live Examples
Haber Process chemical equation
Widget Variations
Chemical Equation Widget Combustion Reaction Example
Features
  • Chemical formulas with subscripts (H₂O, CO₂)
  • Ion charges with superscripts (Fe³⁺, SO₄²⁻)
  • State symbols for matter phases (s, l, g, aq)
  • Various reaction arrows (→, ⇌, ⇋) with conditions
  • Stoichiometric coefficients for balanced equations

Additional Supported Content

📝

LaTeX Math

Render mathematical expressions using <tex> tags

🎨

SVG Graphics

Custom SVG drawings with full attribute support

📋

Tables

HTML tables with colspan, rowspan, and LaTeX content

🔷

3D Geometry

Interactive 3D shapes with perspective projection and labeled vertices

← Back to Home