Hallo, Besucher der Thread wurde 913 aufgerufen und enthält 5 Antworten

letzter Beitrag von Belarus am

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,

    nachfolgend eine Möglichkeit ein Quiz in eure Seite zu integrieren. Das Quiz besteht aus HTML, CSS und Javascript und kann quasi unendlich viele Fragen und Antworten beinhalten. Per CSS kann das Quiz zudem individuell an jeden Style angepasst und aufgehübscht werden.

    Features

    • Leichte Integration
    • Einfaches anpassen an Deinen Style
    • Quasi unendlich viele Fragen & Antworten möglich
    • Quiz mit Bildern erweiterbar, wie in diesen Beitrag beschrieben
    • Auch mit SCSS-Variablen ($Variable) möglich, wie in diesen Beitrag beschrieben




    Demo


    Eine Live Demo kann hier betrachtet werden: Belarusinfo.de: Quiz ;)

    Info: Das dortige Quiz beinhaltet auch Bilder wie in diesen Beitrag beschrieben und zudem passende Tags zum Thema.

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    Beachte bitte, dass nach der letzten Antwortmöglichkeit sowie auch der letzten schließenden schweifenden Klammer bei der letzten Frage kein Komma gesetzt werden darf!


    Benutzung

    1. Gehe zu Inhalt Seiten
    2. Klicke auf + Seite hinzufügen und wähle den html-Seitentyp
    3. Kopiere die o.a. Quellcodes in die neue Seite und speicher diese ab. Vergewissere Dich den Style in <style>-Tags und das Script in <script>-Tags zu setzen! Der CSS-Quellcode kann natürlich auch im Stil unter Eigenes CSS/SCSS eingefügt werden.
    4. Anpassen der CSS-Deklarationen
    5. Fertig!


    Um weitere Fragen hinzuzufügen, kann folgender Ausschnitt des Quellcodes genutzt werden:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    Unter question: "DEINE NEUE FRAGE" können natürlich auch <img>-Tags eingefügt werden. Beachte jedoch, dass dazu weitere CSS-Deklarationen notwendig sind um die Bilder und die dazugehörige Frage entsprechend richtig darstellen zu können.


    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots



    Frage und AntwortmöglichkeitenAusgabe des Ergebnisses



    Gruss,
    Andreas

    Update:


    Möchte man, wie in der Information im ersten Beitrag erwähnt wurde, Bilder per <img>-Tag in den Fragen aufnehmen und die Frage zudem mit einer Überschrift im <h1>-Tag und einer Beschreibung im <p>-Tag versehen, so kann dies relativ einfach mit folgenden Quellcodes getan werden:


    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.


    Auch wenn es selbsterklärend sein sollte, hier eine kurze Erklärung der einzelnen Tags:

    <img src='DEIN_LINK_ZUM_BILD' class='quiz-image'>Das Bild welches über den Quiz angezeigt werden soll
    <h1 class='quiz-question'>DEINE_QUIZ_FRAGE</h1>Deine Quizfrage
    <p class='quiz-description'>DEINE_BESCHREIBUNG_ZUR_QUIZ_FRAGE</p>Eine optionale Beschreibung zur Quizfrage


    Und so sieht das ganze dann zu guter letzt aus:

    Beachte bitte, dass je nach genutzten Style eventuelle Anpassungen der CSS-Deklarationen notwendig sind!


    Gruss,
    Andreas

    Update:

    Achtung: Dies ist bisher noch ungetestet und entsprechend dessen sollte natürlich vorher ein Backup angelegt werden!


    Wer des öfteren die Bilder, Fragen, Antworten oder Beschreibung im Quiz abändern möchte, der kann auch mit SCSS-Variablen arbeiten. Dazu ist es lediglich notwendig, den CSS-Quellcode im genutzten Style unter Anpassung Stil MEIN_STYLE Eigenes CSS/SCSS auszulagern. Wie das ganze umgesetzt werden kann, möchte ich im folgenden einmal genauer erklären.


    Dazu müssen als erstes im CSS-Quellcode Variablen für den Bildpfad, der Frage, Antworten und der richtigen Antwort angelegt werden:

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Im folgenden müssen die Variablen im Javascript wie folgt eingebunden werden.

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Im Quiz sollten nun alle Variablen aus dem CSS-Quellcode im Javascript und damit im Quiz übernommen und angezeigt werden. Selbstverständlich müssen bei allen Fragen im Quiz andere Variablen genutzt werden. Als Beispiel wie hier bei der ersten Frage die Variable $First..., müsste dies bei der zweiten Frage dann jeweils mit $Second..., bei der dritten mit $Third... ersetzt werden. Natürlich können die Variablen auch selbst abgeändert werden. Lediglich müssen die Variablen im CSS- sowie Javascript Quellcode identisch sein.


    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

    Dieses Thema enthält 3 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 3 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!