html/css page, bilder-vote/gewinnspiel HILFE

Hallo community,

ich betreue die homepage einer bäckerei aus bayern ( Bäckerei und Brothaus/Café Kohler ). bisher konnte ich mich ganz gut zurecht finden mit html und css tutorials. jetzt wurde mir allerdings eine aufgabe gestellt, wo ich mit meinem latein am ende bin. ich bräuchte mal ein paar wegweiser in die richtige richtung.

die problematik gestalltet sich folgendermaßen:

es soll ein gewinnspiel eingerichtet werden. der user soll eine auswahl an bildern dargestellt bekommen in 2 kategorien. diese soll er dann einander zuordnen. sagen wir kategorie 1 sind zahlen 1 -8 , kategorie 2 buchstaben a-h. sobald der user die bilder zugeordnet hat, zB: a2; b4; c7; … usw soll überprüft werden ob die zuordnung zu 100% korekt ist und falls dem so ist, registriert werden wer das war.

wie stelle ich das am besten an ?

bin dankbar für alle vorschläge

Ich würde es mit PHP machen.

Ein Formular mit drei Feldern anlegen. Das erste von Typ hidden für den Lösungswert, im zweiten liegt das Bild, und in das dritte schreibt der Besucher seine Lösung. Wenn der Besucher richtig getippt hat, leitest du ihn auf eine Seite weiter, wo er seine Adresse angeben kann, um den Preis zugesandt zu bekommen.

Die Abfrage könnte dann in etwa so aussehen:

[PHP]if ($_POST) {
if ($_POST[‚hidden‘] == $_POST[‚loesung‘]) {
header(‚location: adressformular.php‘);
} else {
echo ‚Schade, Sie haben verloren.‘;
}
}[/PHP]

Es ließe sich auch ohne hidden field über eine Datenbank realisieren. Bilder und Lösungswert in die Datenbanktabelle schreiben, die Bilder anschließend mittels Foreach Schleife in ein HTML-Formular ausgeben, und mit den vom Besucher eingetragenen Lösungen ein query durchführen.

Das mit dem versteckten input-Element, in dem die Lösung steht, ist keine gute Umsetzung, da die Lösung dann im Code der Seite sichtbar ist. Das mit der Datenbank liest sich besser, hängt aber davon ab, wie genau die Geschichte umgesetzt werden soll.

Die Problembeschreibung ist leider ziemlich ungenau. Ich stelle mir vor, du hast zwei Reihen von meinetwegen je acht Bildern und möchtest zwischen diesen 16 Bildern acht Verknüpfungen herstellen.

Mein erster Gedanke wäre da JavaScript. Du könntest beispielsweise per Drag & Drop eine Umsortierung der Bilder in einer Reihe zulassen. Du könntest auch eine weitere Zielfläche anlegen mit zwei Reihen mit je acht Feldern, von denen je zwei verknüpft sind, auf die die 16 Bilder gezogen werden können.

Als Fallback (falls JS deaktiviert ist) würde ich select-Elemente verwenden. So nach dem Schema:

Bild 1 ist zugeordnet [Bild A]. Bild 2 ist zugeordnet [Bild B]. Bild 3 ist zugeordnet [Bild C]. Bild 4 ist zugeordnet [Bild D]. Bild 5 ist zugeordnet [Bild E]. Bild 6 ist zugeordnet [Bild F]. Bild 7 ist zugeordnet [Bild G]. Bild 8 ist zugeordnet [Bild H].

Dabei können in den umklammerten Bereichen jeweils alle Bilder A-H ausgewählt werden.

Man kann anstatt der eigentlichen Lösung auch die Lösung per md5-verschlüsselt eintragen und dann die Übereinstimmung überprüfen

lascaux

MD5 ist zwar keine Verschlüsselung, sondern ein Hashing-Algorithmus, aber das wäre definitiv besser und dürfte sich, wenn man es halbwegs schlau anstellt (Stichwort: Salt), nicht mehr ohne extremen Aufwand knacken lassen, ja.