Forum • Rocket Beans TV

"Punktetafel" programmieren

Talk Hardware / Software
#1

Hallo,

vorneweg, meine Kenntnisse im Programmieren sind auf dem Level ich weiß das es da so etwas gibt wie html…

Nun zu meinem Problem/Wunsch.

Ich möchte für den privaten Bereich ein kleines Filmquiz auf die Beine stellen. Stattfinden wird es, wie soll es auch anders sein momentan, per Videocall. Um das ganze ein wenig „professioneller“ wirken zu lassen, hätte ich gerne zur Fragenauswahl eine grafische Oberfläche. Falls meine Wunschlösung, die ich gleich beschreibe, nicht funktioneren sollte (ergo ich bekomme es nicht hin) würde ich das ganze per Paint „malen“ und gut ist.

Nun aber zu meinem Wunsch (siehe Anhang)

Ich hätte gerne ein Tableau, wo man dann die einzelnen Fragefelder anklicken kann. Klickt man ein Feld, startet daraufhin ein Video. Dieses würde ich gerne pausieren können. Am Ende des Videos geht es wieder automatisch zurück zur Startseite, wo die eben angeklickte Frage nun z.B. ausgegraut ist.
Unter den Fragen soll eine Punktetafel sein, die ich händisch bedienen kann (also entweder Zahl reinschreiben oder per lus/minus zeichen steigern.

Jetzt die Frage, wie kompliziert ist das?

Filmquiz
Filmquiz1389×613 73.6 KB

Vielen Dank, und frohe Weihnachten

#2

Das ist relativ einfach umzusetzen und ein bisschen JavaScript und HTML sollte dafür reichen. Ist schwer einzuschätzen wie lang du, so ganz ohne Vorerfahrung, dafür brauchen wirst das umzusetzen.

Ohne jetzt ein ganzes Tutorial zu schreiben: Du brauchst im Grunde nur eine Tabelle, in der du entsprechende Videos verlinkst und zum Beispiel via Popup öffnest. Bereits angeklickte Links kannst du sehr einfach via CSS und/oder JavaScript einfärben.
Eingabefelder, die sich bearbeiten lassen, sind HTML-Standard. Auch das Einbetten von Videos gehört mittlerweile auch zum HTML-Standard. Die Videos könntest du einfach in einem neuen Tab öffnen lassen und dann manuell schließen, wenn sie nicht mehr gebraucht werden. Mit etwas JavaScript könntest du sie aber auch in einem Popup, direkt auf der Seite, öffnen lassen.

Theoretisch könnte man alles komplett in HTML machen. Dann brauchst du gar nichts programmieren. Wenn du es aber etwas hübscher und komfortabler haben willst, kannst du das Ganze mit JavaScript noch etwas aufbohren.
Das Schöne an HTML und JavaScript ist, dass du schon alles hast, was du dafür brauchst. Einen Browser und einen Texteditor. Du brauchst auch keinen Server oder dergleichen.

Ich würde dir empfehlen dich erst mit den HTML und CSS-Grundlagen vertraut zu machen (das ist nicht besonders viel oder kompliziert). Danach kannst du dich mit JavaScript befassen. Für JavaScript gibt es zahlreiche Bibliotheken, die viele Dinge einfacher machen. Hier würde sich jQuery anbieten.

Und für all das gibt es enorm viele Lernressourcen. Die beliebteste Anlaufstelle zum Lernen von HTML und JavaScript ist (meiner Erfahrung nach) W3Schools Online Web Tutorials

#3

Vielen Dank schonmal.

Ja, die Theorie scheint einfach zu sein.
Habe mir mal einen HTML Editor runtergeladen und versuche mal mein Glück.
Werde mal meine ersten Schritte dokumentieren und hier posten. Mal schauen wie schnell das wird.

#4

Ok, bin ein bisschen weiter.
Habe jetzt eine Tabelle, verschieden farbig, alles gut soweit.
Einen Link habe ich auch erstellt. Nur jetzt ist die Frage, wie wird ein bestimmtes Video abgespielt (von meiner Festplatte) wenn ich auf den Link klicke.

habe es hiermit versucht:
<td><p><a href="file:///F:/FilmQuiz test/Filme erkennen/Frage 1.mp4/">Frage 1</a></p></td>

Wo liegt mein Fehler? oder meine Fehler?

bin schon seit ner Stunde am tüfteln

#5

Browser sind heutzutage Links auf das lokale Dateisystem recht abgeneigt, aus Sicherheitsgründen.

#6

Wenn du es ganz einfach haben willst kannst du auch die Zahlen in deiner Exceltabelle mit den Videos verlinken :slight_smile:

1 Like
#7

ok, das macht Sinn.

Also könnte ich aber z.B. meine Videos bei youtube hochladen und dann darauf verlinken oder?

habe das gefunden, was funktioniert:

 <p></p><audio id="audio_with_controls" controls
                                  src="Dateien/torhymne5.mp3"
                                  type="audio/mp3">   </audio>

geht das dann nur mit Audio? Weil das greift auch auf Dateien auf dem eigenen PC zurück.

#8

bei open offfice auch?
und öffnet der dann den Player?

#9

Kenne mich mit Openoffice nicht aus, aber ich denke das müsste gehen. Kannst es ja mal testen indem du einen Link in einer Zelle zu einem Testvideo einfügst.

#10

Funktioniert.

Und den openoffice calc kann man bestimmt auch irgendwie hübsch machen^^

Vielleicht bekomm ich das mit html ja noch irgendwie hin

#11

Sowas kann man eigentlich auch gut mit Powerpoint realisieren., Da kann man ja auch links zur nächsten Seite einbauen und dann das es wieder zurück springt. Ist halt n bisschen Arbeit, aber es geht. (Habe selbst Mal ein Quiz gestaltet, allerdings mit immer 4 Antwort Möglichkeiten, die sich eingefärbt haben, aber so sollte das da ja auch gehen )

1 Like
#12

Habe es jetzt mit openoffice calc gemacht.
Sieht zwar alles andere als hübsch aus, aber erfüllt immerhin seinen zweck einigermaßen :slight_smile:

Filmquiz 2
Filmquiz 21832×818 251 KB

Frage 1,2 etc. wird noch durch eine Wertigkeit (100, 200,…) ersetzt. In welcher Rangfolge müssen meine Tester entscheiden^^

3 Like
#13

Sieht doch gut aus! Wenn dir die Optik noch nicht ganz zusagt: Du kannst bestimmt noch irgendwie ausstellen, dass Links automatisch so graublau formatiert werden um das Auswahlfeld vollständig einzufärben.
Falls OpenOffice da Probleme macht kannst du es damit auch mal LibreOffice als Alternative versuchen, das soll angeblich der neue Office-Freeware-Primus sein (ist aus Openoffice hervorgegangen).

#14

Danke. Habs mit oben Libre schöner hinbekommen :slight_smile:

Die SPieler waren verwundert das es mit §excel" gemacht wurde :stuck_out_tongue:

1 Like