Computing · JC 2

Active learning ideas

Database Integration in Web Apps

Active learning helps students internalize how charts and graphs work because they see immediate consequences of their choices when they build and test visuals themselves. Working with real datasets makes abstract concepts concrete, so students notice patterns and errors through hands-on practice rather than abstract rules.

• MOE Syllabus Outcomes
• MOE H2 Computing (Syllabus 9569), Section 2: Programming - 2.3 Software Development (Integration of Database with Web Applications)
• MOE H2 Computing (Syllabus 9569), Section 3: Data and Information - 3.2 Databases (CRUD Operations via Application Code)

• 30–50 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Plan-Do-Review
• 30 min · Pairs

Pairs Practice: Trend Line Graphs

Pairs load a time-series dataset, like monthly rainfall, into spreadsheets. They create line graphs, adjust axes, and add trendlines. Partners then explain patterns to each other and suggest one improvement.

How does a web application securely connect to a database?

Facilitation Tip

During Pairs Practice, circulate to ask each pair why they chose a line graph and what the slope or gaps mean in their specific dataset.

What to look for

Provide students with a small dataset (e.g., monthly rainfall for a city). Ask them to identify the best chart type to show changes over time and sketch what that chart would look like, labeling the axes.

• Remember
• Apply
• Analyze
• Self-Management
• Decision-Making
• Self-Awareness

Activity 02

• Plan-Do-Review
• 45 min · Small Groups

Small Groups: Chart Selection Challenge

Groups receive three datasets and must choose, create, and justify the best chart type for each. They test alternatives in spreadsheets and vote on the clearest visual. Present findings to the class.

What are the steps to process form data and insert it into a database?

Facilitation Tip

For the Chart Selection Challenge, provide a timer so groups must defend their chart choice quickly to peers before moving to the next dataset.

What to look for

Students are given two scenarios: 1. Comparing sales figures for three different products. 2. Showing the percentage breakdown of a company's expenses. For each, they must write down the most appropriate chart type and one reason why.

• Remember
• Apply
• Analyze
• Self-Management
• Decision-Making
• Self-Awareness

Activity 03

• Plan-Do-Review
• 50 min · Whole Class

Whole Class: Visual Critique Gallery

Students create one chart from shared class data and post prints around the room. The class conducts a gallery walk, noting strengths and issues with sticky notes. Discuss revisions as a group.

How can we prevent SQL injection attacks in web forms?

Facilitation Tip

In the Visual Critique Gallery, post questions near each chart that push viewers to identify at least one strength and one weakness before rotating.

What to look for

Present students with a poorly designed chart (e.g., misleading scale, wrong chart type). Ask: 'What makes this chart ineffective at communicating its message? What specific changes would you make to improve its clarity and accuracy?'

• Remember
• Apply
• Analyze
• Self-Management
• Decision-Making
• Self-Awareness

Activity 04

• Plan-Do-Review
• 35 min · Individual

Individual: Custom Dataset Graphs

Each student imports personal or school data, like attendance trends, builds two charts, and writes a one-paragraph insight summary. Share digitally for class comments.

How does a web application securely connect to a database?

Facilitation Tip

When students create Custom Dataset Graphs, require them to write a two-sentence summary of what their chart shows and why their choices work.

What to look for

Provide students with a small dataset (e.g., monthly rainfall for a city). Ask them to identify the best chart type to show changes over time and sketch what that chart would look like, labeling the axes.

• Remember
• Apply
• Analyze
• Self-Management
• Decision-Making
• Self-Awareness

A few notes on teaching this unit

Teachers should emphasize that chart design is a form of argument: the best visuals make a clear claim without misleading the audience. Avoid teaching chart types as isolated facts; instead, link each type to a communicative purpose like comparison or change over time. Research shows students learn most when they revise charts after feedback, so plan for iterative improvements rather than single attempts.

Successful learning looks like students confidently matching chart types to data goals, justifying their choices with clear reasoning, and spotting misleading designs in peer work. They should describe what each visual reveals and how it improves communication compared to raw numbers.

---

Watch Out for These Misconceptions

• During Chart Selection Challenge, watch for students who default to pie charts for all proportion data, even when slices multiply or represent time.

  Give groups a dataset with 12 categories and ask them to sketch both a pie chart and a bar chart, then present which one communicates the breakdown more clearly and why.

• During Visual Critique Gallery, watch for students who overlook missing labels or unclear axes in peer charts.

  Post a checklist with items like 'Does every axis have a clear label and unit?' and require students to check off each item before writing their critique notes.

• During Pairs Practice, watch for students who assume taller bars always mean larger values without checking the scale.

  Provide datasets with identical values but different scales (e.g., 0-100 vs 50-60) and ask pairs to predict how the visual will change, then test their predictions by adjusting the graph.

---

Methods used in this brief

• Plan-Do-Review