繁體中文 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 Clock Selection
Analog clock time reading Time Reading
Analog to digital clock conversion 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 Multiple Choice
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 Temperature Chart
Bar chart books borrowed question Books Borrowed
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 Household Expenses
Stacked bar chart activity participation Activity Participation
Stacked bar chart cinema snack sales Cinema Snack Sales
Stacked bar chart bakery sales Bakery Sales
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 Daily Steps
Broken line graph weekly temperature Weekly Temperature
Broken line graph books read Books Read
Broken line graph monthly temperature Monthly 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 IQR Question
Box whisker salary comparison Salary Comparison
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 Linear Inequality
Feasible region graph Feasible Region
Simultaneous equations Simultaneous Equations
Line intersection Line Intersection
Logarithmic functions Logarithmic Functions
Exponential function Exponential Function
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 Tetrahedron Faces
Tetrahedron properties question Tetrahedron Properties
Rectangular prism vertices question Rectangular Prism
Hexagonal prism vertices question Hexagonal Prism
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.

Live Examples
Electric circuit diagram question Circuit Calculation
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 Haber Process Equation
Chemical reaction conditions Reaction Conditions
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