Session 7B Friday, 29 September 2000

Interactive Computer aided Learning

Graphical Interactive Systems, University of Tübingen (Germany)

Basic RequirementsBasic Requirements f foror

InteractiveInteractive Web-basedWeb-based CoursewareCourseware

ICL 2000

Frank Hanisch

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Idea

Introduction

easy no image

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Image

Introduction

"Like an imagetells us more thanthousand words …”

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Virtual Experiment

Introduction

"… proper visualizationtells us more thanthousand images."

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Goals

Introduction Unified Framework

for theory, examples and exercisesfor teacher, tutor, student

in computer graphics: programming exercises

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Goals

Introduction

in computer graphics: programming exercises

Unified Framework

for theory, examples and exercisesfor teacher, tutor, student

Improvement of Teaching

time-sparing creation / modification reusable modulesbetter visualizations

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Goals

Introduction

in computer graphics: programming exercises

Unified Framework

for theory, examples and exercisesfor teacher, tutor, student

Improvement of Teaching

time-sparing creation / modification reusable modulesbetter visualizations

Improvement of Learning Process

framework less time-consumingdeeper understanding of relationshipsinteractive

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Goals

IntroductionHypermedia

Visualization

Interaction

Unified Framework

for theory, examples and exercisesfor teacher, tutor, student

Improvement of Teaching

time-sparing creation / modification reusable modulesbetter visualizations

Improvement of Learning Process

framework less time-consumingdeeper understanding of relationshipsinteractive

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Graphical Interactive Systems

visualization

interaction

hypermedia

Introduction

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Challenges

IntroductionHypermedia

international, adaptableessential components fully interlinked

consistent, reliable

Visualization

Interaction

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Challenges

IntroductionHypermedia

international, adaptableessential components fully interlinked

consistent, reliable

Visualization

proper visualizationessential parameters and relationships

Interaction

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Challenges

IntroductionHypermedia

international, adaptableessential components fully interlinked

consistent, reliable

Visualization

proper visualizationessential parameters and relationships

Interaction

proper interactionwith all visible information

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Solution ?

IntroductionHypermedia

international, adaptableessential components fully interlinked

consistent, reliable

Visualization

proper visualizationessential parameters and relationships

Interaction

proper interactionwith all visible information

easy creation & modificationof structure, contents, design

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Solution ?

IntroductionHypermedia

international, adaptableessential components fully interlinked

consistent, reliable

Visualization

proper visualizationessential parameters and relationships

Interaction

proper interactionwith all visible information

!!

easy creation & modificationof structure, contents, design

easy creation & modificationof structure, contents, design

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Solution ?

IntroductionHypermedia

international, adaptableessential components fully interlinked

consistent, reliable

Visualization

proper visualizationessential parameters and relationships

Interaction

proper interactionwith all visible information

easy creation & modificationof structure, contents, design

easy creation & modificationof structure, contents, design

easy creation & modificationof structure, contents, design

?

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Solution ?

Basic Requirements for

Static Content

Dynamic Content

Highly Interactive Content

create ?

adaptive ?

modify ?

international ?

consistent ?

interactive ?

learn ?

Framework

OnlineAssistant

VirtualExperiments

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Web Server

Framework

Framework

1

2

3

Client

Author

User

Organization

Separation

Internationalization

& Personalization

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Web Server

Authoring Tool

database

1

1

2

3

Client

Author

User

Organization

Separation

Internationalization

& Personalization

Framework

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Web Server

Authoring Tool

structure content design

templates 2 Organization

Separation

Internationalization

& Personalization

1

2

3

Client

Author

UserFramework

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Authoring Tool

fr

de

en–novice

en

en-expert

3layered database model

Web Server

Client

Author

User

Organization

Separation

Internationalization

& Personalization

1

2

3

Framework

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

Web Server

Client

Author

User

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

Web Server

Client

Author

User

HTML-Forms & CGI

or better: Java Servlets

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

template defined

state machine

on exit: notify editorial staffverify data

restart generator

select exitinput n-1input 1 input 2

step1 stepn

send

…

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

1

2

3

4

give feedback

select preview exitinput n-1input 1 input ninput 2

step1 stepn

send

…

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

undo

1

2

3

4

no dead ends

select preview exitinput n-1input 1 input ninput 2

step1 stepn

send

…

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

step1 stepn

send

2

3

4

1

provide default / existing data

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

step1 stepn

send

remember user & all input without cookies, JavaScript with firewall

2

3

4

1

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

step1 stepn

DB

IP IP1 IPn IP

DB

send

remember user & all input without cookies, JavaScript with firewall

2

3

4

1

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

if (lastState==select) IP = DBif (action==inputi) IPi = stepi.dataif (action==send) DB = IPstepi.data = IP

step1 stepn

DB DB

send

IP IP1 IPn IP

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

if (lastState==select) IP = DBif (action==inputi) IPi = stepi.dataif (action==send) DB = IPstepi.data = IP

step1 stepn

DB DB

send

IP IP1 IPn IP

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

if (lastState==select) IP = DBif (action==inputi) IPi = stepi.dataif (action==send) DB = IPstepi.data = IP

step1 stepn

DB DB

send

IP IP1 IPn IP

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

if (lastState==select) IP = DBif (action==inputi) IPi = stepi.dataif (action==send) DB = IPstepi.data = IP

step1 stepn

DB DB

send

IP IP1 IPn IP

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

The Online Assistant

OnlineAssistant

select preview exit…input n-1input 1 input ninput 2

defaults

undo

if (lastState==select) IP = DBif (action==inputi) IPi = stepi.dataif (action==send) DB = IPstepi.data = IP

step1 stepn

DB DB

send

IP IP1 IPn IP

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Virtual Experiments

VirtualExperiments

GEOGEO

SCENESCENEGUIGUI

Java Swing: User Interface

Java 2D / 3D: Math and Gfx

Specialized GUI

Advanced Math & Relationships

VisualizationInteraction

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Virtual Experiments

VirtualExperiments

GEOGEO

SCENESCENEGUIGUI

Java Swing: User Interface

Java 2D / 3D: Math and Gfx

Toolkit of basic

reusable software components

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Virtual Experiments

VirtualExperiments

GEOGEO

SCENESCENEGUIGUI

Java Swing

Java 2D / 3D

geo

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Virtual Experiments

VirtualExperiments

GEOGEO

SCENESCENEGUIGUI

Java Swing

Java 2D / 3D

geo

objects renderersconstraints

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Virtual Experiments

VirtualExperiments

GEOGEO

SCENESCENEGUIGUI

Java Swing

Java 2D / 3D

geo

objects renderersconstraints

nodes

actionsgui

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Case Study

Templates for

Self-Learning Testsfor Gaps

Multiple Choiceetc.

Automated Indicesfor Keywords

IllustrationsLiteratureGlossary

Visualization

www.gris.uni-tuebingen.de/projects/bioinf

Introduction

Framework

Basic Requirements for Interactive Web-based CoursewareICL 2000

Frank Hanisch, Graphical Interactive Systems, University of Tübingen (Germany)

OnlineAssistant

VirtualExperiments

Many Thanks !www.gris.uni-tuebingen.de

Courseware “Visualization in Bioinformatics”Courseware “Visualization in Bioinformatics”Prof. Straßer, Prof. ZellUniversity of Tübingen

www.gris.uni-tuebingen.de/projects/bioinf

Electronic Webmaster “GRIS Homepage”Electronic Webmaster “GRIS Homepage”Prof. StraßerUniversity of Tübingen

www.gris.uni-tuebingen.de

Frank.Hanisch @ WSI-GRIS.Uni-Tuebingen.DE