HSC2011/Software/Frontend: Unterschied zwischen den Versionen

aus Metalab Wiki, dem offenen Zentrum für meta-disziplinäre Magier und technisch-kreative Enthusiasten.
Zur Navigation springenZur Suche springen
(→‎Possible Applications: added typical program size)
 
(6 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<small>< [[HSC2011]]</small>
+
<small>[[HSC2011]]</small>
  
===Teacher Frontend===
+
=Teacher Frontend=
  
HTML/JS webapp running on the teacher's laptop.
+
The whole user visible part of the EduBuzzer software runs inside a web browser on the teacher's laptop; the files are served by [[HSC2011/Software/Ygor|Ygor]], the middleware. It is implemented in JavaScript.
  
UX Design Wireframes: '''[[HSC2011/FrontendWireframes|Interaction Design Version 0.4]]'''
+
The teacher gets an overview of the whole setup's status (connected devices etc.) and can choose applications from a main screen.
  
 +
Until screen shots are available, see the UX Design Wireframes at '''[[HSC2011/FrontendWireframes|Interaction Design Version 0.4]]''' to get an idea of how it looks like.
  
 +
=Possible Applications=
  
==List of possible applications:==
+
We are far from having implemented all the ideas we have of what could be run on the EduBuzzers -- they will be added over time.
  
==Application '''"RAISE YOUR HANDS"'''==
+
Want to implement you own? It is just a matter of simple JavaScript coding (voting application in about 60 lines of code). [[HSC2011/Software/Frontend/Application development|See how it is done!]]
  
I. Application start:
+
=='''Raise Your Hands'''==
* Teacher poses question to the class
 
* Presses the "start" button in the frontend
 
* Buzzers change status (e.g. pulsing LEDs) as a sign that users can press button to raise their hands
 
  
II. During the timeout period:
+
Also see [[HSC2011/Documentation#Screenshots]]
* as soon as a user presses a button on his or her buzzer
 
* the buzzer changes status (different LED signal)
 
* the frontend displays each buzzer status change
 
  
III. Timeout end
+
=== Application start ===
* either automatic or teacher hits the "stop" button in the frontend
+
The teacher poses a question to the class. He presses the ''start'' button in the frontend. Buzzers change status (e.g. pulsing LEDs) as a sign that users can press a button to raise their hands.
* buzzers change their status to show that time is over
 
* computer changes random buzzer
 
* selected buzzer changes status (e.g. plays sound, yellow LED flashes)
 
* user with selected buzzer answers the teacher's question
 
  
IV. Evaluate answer
+
=== During the timeout period ===
 +
As soon as a user presses a button on his or her buzzer, the buzzer changes status to a different LED signal. The frontend displays each buzzer status change.
 +
 
 +
=== Timeout end ===
 +
It ends either automatically or the teacher hits the ''stop'' button in the frontend. Buzzers change their status to show that the time is over. The computer selects a random buzzer. The selected buzzer changes status (e.g. plays sound, yellow LED flashes). The user with selected buzzer answers the teacher's question.
 +
 
 +
=== Evaluate answer ===
 
The teacher presses one of the following buttons in the frontend:
 
The teacher presses one of the following buttons in the frontend:
* correct answer
+
* Correct answer: The buzzer changes status to reflect ''correct answer''. The application returns to the start screen.
** buzzer changes status to reflect "correct answer"
+
* Incorrect answer and start a new timeout. The buzzer changes status to reflect ''wrong answer''. The application returns to the start screen.
** app returns to start screen
+
* Incorrect answer and select a new random buzzer. This option is disabled if there aren't any buzzers left that have pressed a button. The buzzer changes status to reflect ''wrong answer''. The new selected buzzer changes status to ''answer please''.
* incorrect answer, start new timeout
 
** buzzer changes status to reflect "wrong answer"
 
** app returns to start screen
 
* incorrect answer, select new random buzzer (this option is disabled if there aren't any buzzers left that have pressed a button)
 
** buzzer changes status to reflect "wrong answer"
 
** new selected buzzer changes status to "answer please"
 
  
=='''VOTES/SURVEYS'''==
+
=='''Votes/Surveys'''==
Enables voting on a topic without raising your hand in front of the class which ultimately leads to a more honest voting behaviour
+
Students vote on a topic without raising your hand in front of the class which ultimately leads to a more honest voting behaviour. This application enables voting mechanisms that are hard to do with paper like multiple choice and ratings on preferred solutions as in "I'd like option A but if we don't get enough votes for that, option B would be my second favourite".
Enables voting mechanisms that are hard to do with paper like multiple choice and ratings on preferred solutions as in "I'd like option A but if we don't get enough votes for that, option B would be my second favourite."
 
  
 +
A question is displayed, there are four possible answers. The students press the button for their most preferred answer, this is their ''first choice''. The button LED is ''blinking'' now. If the student wants to select an additional answer (''second choice'') he presses another button. For affirmation it also blinks, but slower. This procedure works up to four options.
  
* es wird eine frage angezeigt, es gibt 4 mögliche antwortmöglichkeiten
+
When the vote is over, how many points each option gets is calculated and displayed. The first choice is worth four points, the second three etc.  
* die schüler haben die möglichkeit für ihre präferierte antwort einen knopf zu drücken.
 
* das ist ihre ERSTWAHL
 
* der knopf BLINKT nun
 
* wenn der schüler noch eine option (zweitwahl) wählen will drückt er einfach einen weiteren knopf und der blinkt dann auch (langsamer?)
 
* das geht maximal mit 4 optionen.
 
* wenn die wahl vorbei ist sieht in punkten wieviele punkte welche option bekommen hat..
 
* erstwahl 4 punkte
 
* zweitwahl 3
 
* ...
 
  
=='''GROUPWORK / GROUPGAMES'''==
+
=='''Group Work/Group Games'''==
** teams of students can be chosen by a random generator this would take the social stress off the teacher as in "i dont want to be in a group with this guy.." "..the computer has chosen ist fair"
+
Teams of students are chosen by a random generator. This would take the social stress off the teacher. (Student: "I don't want to be in a group with this guy." - Teacher: "The computer has chosen fairly.") Games would be possible where groups compete and if a group performs better it has to let a member go into another group. Also the opposite is possible where the best performing group gets new members.
** games would be possible where groups compete and if a group performs better it has to let a member go into another group
 
** also the opposite is possible where the best performing group gets new members..
 
  
=='''WHO WANTS TO BE A MILLIONAIRE MODE'''==
+
=='''Quiz mode (à la "Who wants to be a millionaire")'''==
**if a student doesnt know the answer he could "ask the audience" and the kids could press what they think is the right answer..
+
If a student doesn't know the answer he could ''ask the audience'' and the other students press the button for what they think is the right answer. The question is displayed to the classroom (beamer or similar). A countdown timer is running, meanwhile the students may press a button corresponding to the possible answers. The result is displayed as a bar chart. The teacher reveals the solution by pressing the blue button, pressing blue again advances to the next question.
  
* der laptop hängt am beamer, die js anwendung läuft fullscreen
+
=='''Multiple Choice Tests'''==
* es wird eine frage angezeigt, es gibt 4 mögliche antworten, es läuft ein timer
+
The teacher holds a live test where the students answer questions with multiple choice answers. (FIXME: Multiple choice tests are not very common in Europe so we need to spend research on this subject.)
* in der zeit können die kinder eine der 4 tasten drücken, es werden balken gezeichnet wo man sieht wieviele schüler welche antwort gegeben haben.
 
* der lehrer kann dann auflösen mit dem blauen knopf, drückt er den blauen knopf nocheinmal kommt der nächste slide.
 
  
=='''MULTIPLE CHOICE TESTS'''==
+
=='''Games'''==
** this will probably not be in version 0.1 as it needs a lot of work that is unrealistic to be implemented with the very short deadline of 2 months
 
** teacher should be able to have a live on-stage test where the kids can answer questions with multiple choice pushbutton modes
 
** multiple choice tests are not very common in europe so we need to spend research on this subject
 
  
=='''GAMES'''==
+
==='''Werewolf'''===
** maybe something like the werewolf game
+
A.k.a. [http://en.wikipedia.org/wiki/Mafia_(party_game) Mafia]: The base station choses who is the wolf and the others have to find out who it is by talking to each other on a round based system.
** the remote choses who is the wolf and the others have to find out who it is by talking to each other on a round based system
 
  
 +
==='''Chase'''===
 +
Multiple buzzers are laid out about the class room. Students go from device to device, plug in their ibutton, and push a buzzer button to enter their solution to the quest presented at this station, then go to next station.
  
=='''SCHNITZELJAGD'''==
+
==='''Rhythm game'''===
** multiple stations are layed out around the classroom
+
[http://en.wikipedia.org/wiki/Beatmania Beatmania] work-alike
** students go from station to station, plug in their ibutton, push a button to put in their solution to the quest presented at this station, go to next station
 
  
 
[[Kategorie:HSC2011]]
 
[[Kategorie:HSC2011]]
 
[[Kategorie:English]]
 
[[Kategorie:English]]

Aktuelle Version vom 4. Mai 2011, 04:39 Uhr

HSC2011

Teacher Frontend

The whole user visible part of the EduBuzzer software runs inside a web browser on the teacher's laptop; the files are served by Ygor, the middleware. It is implemented in JavaScript.

The teacher gets an overview of the whole setup's status (connected devices etc.) and can choose applications from a main screen.

Until screen shots are available, see the UX Design Wireframes at Interaction Design Version 0.4 to get an idea of how it looks like.

Possible Applications

We are far from having implemented all the ideas we have of what could be run on the EduBuzzers -- they will be added over time.

Want to implement you own? It is just a matter of simple JavaScript coding (voting application in about 60 lines of code). See how it is done!

Raise Your Hands

Also see HSC2011/Documentation#Screenshots

Application start

The teacher poses a question to the class. He presses the start button in the frontend. Buzzers change status (e.g. pulsing LEDs) as a sign that users can press a button to raise their hands.

During the timeout period

As soon as a user presses a button on his or her buzzer, the buzzer changes status to a different LED signal. The frontend displays each buzzer status change.

Timeout end

It ends either automatically or the teacher hits the stop button in the frontend. Buzzers change their status to show that the time is over. The computer selects a random buzzer. The selected buzzer changes status (e.g. plays sound, yellow LED flashes). The user with selected buzzer answers the teacher's question.

Evaluate answer

The teacher presses one of the following buttons in the frontend:

  • Correct answer: The buzzer changes status to reflect correct answer. The application returns to the start screen.
  • Incorrect answer and start a new timeout. The buzzer changes status to reflect wrong answer. The application returns to the start screen.
  • Incorrect answer and select a new random buzzer. This option is disabled if there aren't any buzzers left that have pressed a button. The buzzer changes status to reflect wrong answer. The new selected buzzer changes status to answer please.

Votes/Surveys

Students vote on a topic without raising your hand in front of the class which ultimately leads to a more honest voting behaviour. This application enables voting mechanisms that are hard to do with paper like multiple choice and ratings on preferred solutions as in "I'd like option A but if we don't get enough votes for that, option B would be my second favourite".

A question is displayed, there are four possible answers. The students press the button for their most preferred answer, this is their first choice. The button LED is blinking now. If the student wants to select an additional answer (second choice) he presses another button. For affirmation it also blinks, but slower. This procedure works up to four options.

When the vote is over, how many points each option gets is calculated and displayed. The first choice is worth four points, the second three etc.

Group Work/Group Games

Teams of students are chosen by a random generator. This would take the social stress off the teacher. (Student: "I don't want to be in a group with this guy." - Teacher: "The computer has chosen fairly.") Games would be possible where groups compete and if a group performs better it has to let a member go into another group. Also the opposite is possible where the best performing group gets new members.

Quiz mode (à la "Who wants to be a millionaire")

If a student doesn't know the answer he could ask the audience and the other students press the button for what they think is the right answer. The question is displayed to the classroom (beamer or similar). A countdown timer is running, meanwhile the students may press a button corresponding to the possible answers. The result is displayed as a bar chart. The teacher reveals the solution by pressing the blue button, pressing blue again advances to the next question.

Multiple Choice Tests

The teacher holds a live test where the students answer questions with multiple choice answers. (FIXME: Multiple choice tests are not very common in Europe so we need to spend research on this subject.)

Games

Werewolf

A.k.a. Mafia: The base station choses who is the wolf and the others have to find out who it is by talking to each other on a round based system.

Chase

Multiple buzzers are laid out about the class room. Students go from device to device, plug in their ibutton, and push a buzzer button to enter their solution to the quest presented at this station, then go to next station.

Rhythm game

Beatmania work-alike