Design Interactive Instruction Using HTML5

and JavaScript

Project D for CIMT 640 – EdCamp 2015Haisong Ye4/20/2015

Queen the Most Powerful Piece in Chess

Learning objectives

• The learner can move the queen correctly on the board.

• The learner can move the queen to any square(s) to capture a single target in one move.

• The learner can move the queen to any square(s) to capture multiple targets in one move.

Target Learner

o Ages from 7 to11o Interested in playing chess o Concrete operational stage

Prior Knowledge

Piece

Square

Board

Light square

File

Rank

Diagonal

Dark square

Part I. Instructional Considerations

2Interaction

3Assessing with

Puzzles

5Immediate

Feedback

4Scaffold

1Information Process

Information Process

• Relevance• Gaining attention• Informing learning goal• Recalling prior learning• User controlled learning

pace

1Information

Process

Interactive Chess Board

• Manipulates chess rules in real time

• Shows/hides the valid paths for different pieces

• Provides sound feedback for actions

• A support tool for instructional design

2Interacti

on

Assessing with Puzzles

• Emphases applying knowledge in puzzle solving

• Less instructional text, more problems

• The assessment items are distributed into the learning process.

• Learners have to solve puzzles to advance.

• There are 16 assessment items through this program.

3Assessing with

Puzzles

Hints on movement

• Chess beginners have difficulties to mentally find out all the possible moves which a piece can do

• Provide hints on movement to help them develop the mental skill of finding potential movement

• Scaffold will be removed

4Scaffold

Feedback Design

• Feedback with sound• Detailed feedback for

problems • Random words chosen to

avoid boredom

5Immediate

Feedback

Part II. Technology Implementation

Key challenges

• Interactive board• Calculate path according to movement rules• Save and represent board data

The Interactive Board

Interaction layer

Pieces layer

Path layer

Base board layer

Movement & Path

Save and represent board data

[[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],[null,null,wb,nul,ll,null,null,wq,null],[null,null,null,null,null,null,null,null],[null,null,null,wr,null,null,null,null],[null,null,bn,null,null,null,null,null],[null,null,null,null,null,null,null,null]]

Implementation

• HTML 5 + CSS – for presenting chess board and instructional information

• JavaScript – for chess board and pieces interactions, and instructional process

• JavaScript Object Notation, JSON – for exchange chess board data

• Development tools: Photoshop, Visual Studio 2013

What’s next

• User experience on devices with touch screen• Standard format for chess game (Portable

Game Notation, PGN)• Predefined problems vs. random problems• Learner model and personalized learning

Q&A

The End