elan-ev / cliqrplugin

This plugin is a software clicker solution with a strong emphasis on ease of use for lecturers and students.

Stud.IP Cliqr

Beschreibung

Dieses Plugin ist eine (Software-)Audience Response System (Clicker), das sehr viel Wert auf einfache Bedienung für Lehrende und Studierende legt. Als kleines Feature zeigt das Plugin die URL der Abstimmungsseite als QR-Code an. So kommt das Plugin zu seinem Namen.

Wozu ist Stud.IP Cliqr gut?

Mit Stud.IP Cliqr lässt sich ein so genanntes Peer Instruction nach Eric Mazur durchführen. Dies ist eine Methode, mit der die Studierenden in Vorlesungen besser eingebunden werden und die Möglichkeit erhalten, ihr Verständnis über die vorgetragenen Lerninhalte zu überprüfen.

Wie geht das Peer Instruction?

Der Vortragende stellt alle 20-30 Minuten eine Frage mit mehreren Antwortoptionen (Single-Choice-Frage) ans Plenum. Jeder Studierende ist aufgefordert, diese Frage zu beantworten. Seine Antwort wird mit Stud.IP Cliqr statistisch erfasst, d.h. der Lehrende sieht nun, welche Antwortoptionen das Plenum präferiert. Zur Beantwortung der Frage verwenden die Studierenden ein mitgebrachtes, internetfähiges Endgerät, z.B. ihr Smartphone, Tablet oder Notebook und stimmen auf einer Website ab. Je nachdem, ob das Plenum überwiegend auf die richtige Antwort getippt hat oder ob eher die falschen Antwortoptionen gewählt wurden, führt der Lehrende seine Lehre fort.

Es wird die folgende Vorgehensweise empfohlen:

• 80% der Studierenden haben richtig geantwortet: Der Lehrende gibt vertiefende Erklärungen zu den vorgetragenen Inhalten und wendet sich dann einem neuen Thema zu.

• 30-80% haben richtig geantwortet: Der Lehrende fordert die Studierenden auf mit ihren Nachbarn über die Antwortoptionen zu diskutieren, um so auf das richtige Ergebnis zu kommen. Danach lässt er erneut abstimmen.
• <30% der Studierenden haben richtig geantwortet: Der Lehrende erläutert noch mal die vorgetragenen Inhalte und lässt erneut abstimmen.

Was für Erfahrungen gibt es?

Technologien wie Stud.IP Cliqr haben eine große Verbreitung in den letzten Jahren erfahren und viele Lehrende bedienen sich weltweit dieser Methode. Exemplarisch gibt der nachfolgende Film (3 Minuten) die Erfahrungen von Prof. Dr. Riegler wieder:

https://www.youtube.com/watch?v=pq9LV1Oj3gs

Installation

Stud.IP Cliqr ist ein Plugin für das Lernmanagementsystem Stud.IP. Um das Plugin verwenden zu können, muss der Systemadministrator der Stud.IP-Installation das Plugin installieren. Das Plugin selbst kann man direkt herunterladen oder selbst kompilieren (siehe unten).

Sobald Stud.IP Cliqr in die Stud.IP-Installation aktiviert wurde, kann es in jeder Veranstaltung integriert werden: Dazu geht man genauso vor, wie man auch das Forum, den Dateibereich oder das Wiki hinzufügen würde.

Kompilieren

Um Stud.IP Cliqr selbst zu kompilieren, benötigt man:

• PHP (mind. v5.5) und
• Node.js (und das darin enthaltene npm)

Sobald man Stud.IP Cliqr ausgecheckt hat:

git clone -q https://github.com/luniki/CliqrPlugin.git
cd CliqrPlugin

muss Composer, ein PHP Dependency Manager, installiert werden:

wget "https://getcomposer.org/composer.phar"

Nun werden die notwendigen PHP-Pakete mit composer installiert:

php composer.phar install --no-dev

Zum Kompilieren des JavaScript-Codes benötigen wir JavaScript-Pakete, die mit npm installiert werden:

npm install

Jetzt kann es mit dem Kompilieren losgehen:

npm run build-prod

Zum Schluß muss noch das Stud.IP-Plugin gepackt werden:

npm run zip > /dev/null

Das Endergebnis ist eine fertige ZIP-Datei, die in Stud.IP-Installationen wie üblich eingespielt werden kann.

cliqrplugin's Issues

While connecting do not show reload interactables

After rendering the page the reload interactables are automatically shown. When the pusher connection is established after several ms, these are hidden again, resulting in an ugly visual flash.

Therefore do not show the reload interactables directly but let them appear after a set amount of time.

Labels on sort options seem wrong

Currently the sort options are: "alphabetisch", "nach Aktivität", "nach Startdatum"

Should this be changed?

Redesign of anwers without counts

When displaying answers w/o their counts, aligning them right looks aweful. Redesign this.

JSON.parse error on Android 2.3

The default browser in Android 2.3 has a problem with JSON.parse(null). See: http://code.google.com/p/v8/source/detail?r=5051

"Delete question" button: confirm and wording

Change the wording and let the user confirm the action.

Fly-in menu is broken in Opera

The fly-in menu on questions/index is broken in Opera.

dummy

Cache Google short URL

Generating a Google short URL is expensive. Cache it.

Format of date is ISO 8601; missing l10n?

Dates are shown in ISO 8601 format: 2013-02-04

Should this change?

Keine Aktualisierung bei Voting in neuem Tab

Bei Google Chrome trat bei uns folgende 2 Verhaltensweisen auf (wir loggen uns immer nur mit einem einzigen Login von allen Stellen ein):

(korrektes und erwartetes verhalten)
Wir erzeugen einen neuen Poll und starten ihn.
Wir öffnen die Kurz-URL auf einem Handy und voten dort.
Das Zwischenergebnis des Polls wird live aktualisiert.

(abweichendes verhalten)
Wir erzeugen einen neuen Poll und starten ihn.
Wir öffnen auf der Kurz-URL einen neuen Tab und voten dort.
Das Zwischenergebnis des Polls wird nicht live aktualisiert.
(ich weiss leider nicht, ob die Stimme überhaupt gezählt wurde, ggf. ist es nur ein kleiner Anzeigefehler)
Danke!

• Update 26.01.: Der vote wurde tatsächlich nicht gezählt. Es ist also mehr als nur ein Anzeigefehler

use a composo-able QR code generation lib

For consistency use a QR code library that is composer-able.

Fragen sollen sortierbar sein

Conny möchte:

"Die aktive Frage steht oben auf der Liste, aber es wäre gut, wenn auch der Dozent die Reihenfolge bestimmen bzw. verändern kann."

security review of the php code

Check all Request and URL params.

Preclude activating more than a single question (backend)

Unlike before the Cliqr concept should now accept only a single active question. To realize this, the following things have to change:

• After starting a question, stop all other active questions in the controller.
  (* Make sure that browser documents showing a previous active and now stopped question is dynamically adjusted to reflect the new state via JS.)

Preclude activating more than a single question (frontend)

Unlike before the Cliqr concept should now accept only a single active question. To realize this, the following things have to change:

(* After starting a question, stop all other active questions in the controller.)

• Make sure that browser documents showing a previous active and now stopped question is dynamically adjusted to reflect the new state via JS.

Make plugin compatible for Stud.IP v2.2

Currently the plugin works only in Stud.IP v2.3. Make it compatible with v2.2.

The answer counts of active questions should by default be hidden

Answers counts should be hidden by default to prevent certain social feedback effects of the audience. The counts should be made visible on request (e.g. by pressing a button).

When restarting a stopped question, reset the recorded answers.

Arguably restarting a stopped question should reset the answer counts.

a.) Determine whether this statement is true.

b.) Should there be a way to restart without resetting?

c.) Is restarting a stopped question the primary action of the "show stopped question" view?

Texte in Englisch/Deutsch

Conny merkt an:

"Die Informationen und Beschreibungen sind alle auf deutsch nur in der Suchzeile steht ein englischer Text. "

Explore Push Notification Backend Options

Explore different push notification backends. At least have a look at:

• slanger
• faye
• ratchet

Prepare the server!

Change wording of "Neue Fragen"

The wording of "Neue Fragen" is misleading. Change it to "Geplante Fragen".

Detect clients not supporting pusher-js

There are currently issues with clients that have neither WebSocket support nor Flash installed. pusher uses sockjs as a 2nd fallback but slanger does implement something like this. So make sure that we handle clients w/o pusher-js support and offer a reload button.

Cannot answer previously answered but restarted question

Scenario:

When the student answers an active question
And the lecturer stops, edits then restarts the question
Then the student cannot answer that question again (but should be able to).

Link-Problem "Frage erstellen".

Conny merkt an:

"Man kommt von den "methodischen Informationen" nicht direkt auf "Frage erstellen". "

Offer a percentual view of the answer counts

Curently the answer counts are shown numerically. Offer an option to display them as percentage of n (number of participants).

Eliminate questions/script.coffee

Eliminate script.coffee used for question forms.

Always show the sum of all recorded answers

The sum of all recorded answers should be displayed on the the "show question" page. Something like "n=…" should suffice.

Wording of poll submit button

Currently "submit" but we need a better/german word.

IE10 missing pollid

Clausthal berichtet:

wir haben gestern hier bei uns das APP mit den verschiedensten Handys> getestet und es läuft auch soweit ganz gut...bis auf die Windows-Phone's.
Der Internet Explorer dort, hat genauso wie der Internet Explorer 10 das
Problem, das der aktualisieren Knopf die aktuelle pollid nicht mit sich
führt

Dort gibt es also einen Fehlermeldung, wenn man auf aktualisieren klickt.

Analyse more requirements mentioned by RR and KCH

After presenting the current state of the Cliqr, some people had lot of suggestions. Meet with them and assess their wants.

Add (methodical) help button for lecturers

Add a methodical help for lecturers with Marc's text example:

Button (oben rechts?) mit der Beschriftung "Methodische Informationen"

Text:
Überschrift "Methodische Informationen zum Einsatz von Cliqr"

Wozu ist "Cliqr" gut?
Mit Cliqr lässt sich ein so genanntes Peer Instruction nach Eric Mazur (2006) durchführen. Dies in eine Methode, mit der die Studierenden in Vorlesungen besser eingebunden werden und die Möglichkeit erhalten, ihr Verständnis über die vorgetragenen Lerninhalte zu überprüfen.

Wie geht das?
Der Vortragende stellt alle 20-30 Minuten eine Frage mit mehreren Antwortoptionen (Single-Choice-Frage) ans Plenum. Jeder Studierende ist aufgefordert, diese Frage zu beantworten. Seine Antwort wird mit Cliqr statistisch erfasst, d.h. der Lehrende sieht nur, welche Antwortoptionen das Plenum präferiert. Zur Beantwortung der Frage verwenden die Studierenden ein mitgebrachtes internetfähiges Endgerät, z.B. ihr Mobiltelefon, ein Tablet oder ein Notebook und stimmen auf einer Web-Site ab. Je nachdem, ob das Plenum überwiegend auf die richtige Antwort getippt hat oder ob eher die falschen Antwortoptionen gewählt wurden, führt der Lehrende seine Lehre fort. Es wird die folgende Vorgehensweise empfohlen:

80% der Studierenden haben richtig geantwortet: Der Lehrende gibt vertiefende Erklärungen zu den vorgetragenen Inhalten und wendet sich dann einem neuen Thema zu.

30-80% haben richtig geantwortet: Der Lehrende fordert die Studierenden auf mit ihren Nachbarn über die Antwortoptionen zu diskutieren, um so auf das richtige Ergebnis zu kommen. Danach lässt er erneut abstimmen.

<30% der Studierenden haben richtig geantwortet: Der Lehrende erläutert noch mal die vorgetragenen Inhalte und lässt erneut abstimmen.

Was für Erfahrungen gibt es?
Technologien wie Cliqr haben eine große Verbreitung in den letzten Jahren erfahren und viele Lehrende bedienen sich weltweit dieser Methode. Exemplarisch gibt der nachfolgende Film (3 Minuten) die Erfahrungen von Prof. Dr. Riegler wieder:

http://icast.zew.uni-hannover.de/FlowcastsInfo/play.php?id=mheVZ0da

oder YouTube:
http://www.youtube.com/watch?v=-QERxwN9k2I

Weitere Informationen?

• Literatur: Eric Mazur (2006) Peer Instruction: Wie man es schafft, Studenten zum Nachdenken zu bringen. http://www.bmo.physik.uni-muenchen.de/~riedle/E2p/skript/Mazur_22744.pdf
• Literatur: Werner Stangls Arbeitsblätter http://arbeitsblaetter.stangl-taller.at/KOMMUNIKATION/Feedback.shtml

Sofern an Ihrem Standort vorhanden, fragen Sie die didaktischen Berater in den Hochschul- und Mediendidaktischen Einrichtungen. Die können Sie beim Einsatz von Cliqr unterstützen.

Change wording of "Keine Polls"

Change the wording of "Keine Polls" to "Keine weiteren Fragen"

Question tiles on questions/index aren't completely clickable

The question tiles on questions/index aren't 100% clickable but the pointer is shown anyway.

Quick-create questions

Marc wants:

Könntest du den Button "Frage erstellen" über "Geplante Fragen" ziehen? Und da der
Button so klein ist, kann man ggf. einen Text "Frage erstellen" machen und dann den
Button hinten an hängen mit einem Titel "Spontan" und einem weiteren Button
"Geplant". Je nach dem welchen Button ich verwende gibt wird die Frage dann in
"Geplante Frage" gruppiert oder direkt gestartet. Das sieht dann so aus:

Text "Frage erstellen"
Button "Spontan"
Button "Geplant"

Think about it!

"Big numbers" on questions/index

Marc wants:

Uns irritiert die große Zahl vor der Frage und den Antwortoptionen. Wenn man das Tool
kennt ist klar, das ist die Anzahl jener Studierenden, die teilgenommen haben. Aber das
würde ich nicht so groß darstellen, da es nicht eine so große Gewandnis hat. Ich habe
aber auch keine bessere Idee. Wollen wir hier wegen Usability mal Cornelis Kater
hinzuziehen, der hat da ein gutes Händchen für?

Showing/hiding answer counts via JS

At the moment this is done via hard reloading w/ a GET param. Change this to a JS solution.

Investigate full-screening the show question view

To hide the default Stud.IP layout and coloring investigate full-screening just the shown question via JS.

Handy-Problem beim Abstimmen

Conny berichtet: "Beim Testen gab es auf dem Handy eine Fehlermeldung, anbei der Screenshot ( bzw. ein Foto vom Handy mit Fehlermeldung;)). "

Add view for showing the QR code and make it bigger

Currently the QR code is shown as a simple image without controls. Add a (lightbox-ish?) view for showing it and provide controls to scale the image to a better scannable size.

Use shortened URL to generate QR code

The QR code can be scanned more easily, if the URL is shorter.

Frontend and state changes of questions

When the state of a question changes, the page is reloaded. This should not be necessary, but instead be done dynamically.

400 Trails Error after Login

When you scan the qrCode or follow the link of any question and you are not logged in, you are forced to login. If you do, the page shows an 400 Trails Error thrown by the method "ensureMD5".

The error is actually caused by line 24 in poll.php:

$action = Request::method() === 'POST' ? 'update' : 'show';

Because we send the login data per POST method, the update site is shown instead of the show site.

To ensure the update page is not shown after the login, I made a fix that checks wether the 'login_ticket' hast not been sent. Otherwise it's a login POST request.

Something like this:

$action = (Request::method() === 'POST' && !Request::option('login_ticket')) ? 'update' : 'show';

Explore table view of stopped questions

Marc wrote:

In der Mittagspause kam die Idee auf, dass man es als Tabelle anordnet und zwar so:

Datum; Uhrzeit; Anzahl Beantworter; Frage; Antwortoptionen

23.01.2012; 17:23; 20; Wie viel ist ein Liter?; a) ... b) ...c) ...

Durch klicken auf die Beschriftungszeile für die Tabelle kann man dann auswählen, nach welchen Kriterien gruppiert werden soll.

Wir haben dabei auch daran gedacht, was wenn jeder Dozent pro Woche 3 Fragen stellt, dann sind das in 14 Sitzungen 42 Fragen, da ist so eine Tabellenform auf jeden Fall übersichtlicher.

Re-organize the JS code

The coffee/JS code is not that good organized. Re-organize!

Column count of question tiles changes on sorting

Marc reports:

• Bei "Gestoppte Fragen" fällt auf, dass beim Öffnen des Cliqr-Tab
  (Reiter) die Anordnung nacheinander in einer Spalte vorgenommen wird.
  Erst wenn man von alphabetisch zu "nach Aktivitäten" oder "nach
  Startdatum" geht wechselt er zur Mehrspaltigkeit.

Empty questions/index

Use blank slate design pattern to enhance empty questions/index page

reversing transformation of range_id leaks protected votes

Currently the range_id of a question is: md5("cliqr-$cid"). Given there is a protected course with cid CID_A. No we just need to find a MD5 hash H which solves:

md5("cliqr-$H") = CID_A

to get all active votes of this protected course.

Create a Stud.IP jquerymobile theme

Currently we use the default jquerymobile theme. As Stud.IP has a distinct color scheme, create a new Stud.IP-ish theme for jqm.

Prevent editing of active questions

Active questions should not be editable.

Cache QR code

QR code generation is quite expensive. Cache the results.