Journal of Online Learning Research and Practice Volume 7, Number 2, 2019 | Page 36

Spectrum Educational Tool: Animated Scenarios for Teacher Preparation
We developed a questionnaire comprised
of a set of questions, each having
ratings for users to specify their level of
agreement with how comfortable they
feel with the application. We sought
feedback about the prototype through
questions related to information quality
and interaction quality.
Implementation
We developed the Spectrum
educational tool using the
following scripting programing
languages: HTML5, PHP,
CSS3, JavaScript, and MySQL. We
used Microsoft Expression Web 4 as a
web development application tool. The
Spectrum educational tool authenticates
students, or preservice teachers,
with the help of a username and password.
Students register by giving their
username, email address, and password
to gain access to the application. The
login and registration pages were developed
using PHP and MySQL as a database
to store students’ information. We
developed the animated case studies using
HTML5, CSS3, and JavaScript. The
following sections include details about
these technologies.
Development
All of the features included in the existing
versions of the Spectrum application
were analyzed previously. New
requirements were gathered in a participatory
requirements and design exercise
by Dr. Tripp; gathered requirements
were then analyzed based on
EP. EP allows a continuous refinement
of the system and is based on the understanding
of the requirements by the
developers. A paper prototype was proposed
based on these requirements. Paper
prototyping is a widely used method
in the user-centered design process.
It helps developers build software that
meets the expectations and needs of users.
It is also used for usability testing of
websites, web applications, and conventional
software. It saves time and money
since developers can test the interfaces
of software before they begin development.
Figure 4 shows an example scenario
in initial paper prototype form.
Initially, we developed scenarios
along with the descriptions in Microsoft
Word as paper prototypes. The paper
prototypes of case study scenarios
were developed to illustrate decision
points where making good classroom
management decisions will be beneficial.
We designed the terms in the
scenario to be understandable to preservice
teachers. The interface provides
information so that the teachers may
make some decisions at the end of the
case studies. Each case study ends with
a set of reflection questions prompting
them to solve classroom management
problems through their understanding
of the scenarios. In the design, we consider
the page layout and its size and
platforms based on the final deployment
to support presentation of the
animated case. The following figure is a
paper prototype that illustrates our vision
of a classroom scene.
The research group from the HCI
laboratory, in collaboration with Drs.
Tripp and Seals, initially evaluated the
paper prototypes. The paper prototypes
were refined based on the feedback. Af-
25