Pop-Up Fenster mit einem Cookie Banner erstellen

[Fabiana Mahlke]

Liebe Community!
Im Rahmen meiner Bachelorarbeit stoße ich ein bisschen an meine Grenzen. Die Idee ist, eine Seite zu erschaffen, die so aussieht, als hätte sich ein Pop-Up Fenster mit einem Cookie Banner geöffnet.
Als Antworttyp habe ich den Fragetypen 122 Mehrfachauswahl nebeneinander genutzt. Ich habe es bereits geschafft, den Weiter Button anzupassen in “Auswahl bestätigen” und die Fortschrittsanzeige für diese Seite zu deaktivieren. Was noch fehlt ist Folgendes:

1) Gerne würde ich den Button andersfarbig haben und an eine anderen Position verschieben.

2) Ist es möglich, es ein wenig so aussehen zu lassen wie ein Pop-Up Fenster? Also dass dort evtl eine Taskleiste zu sehen ist mit einem falschen Link, ein Fenster und der Hintergrund etwas dunkler wird?

3) Ich würde gerne die Schriftart bei dieser Frage ändern.

 

Vielleicht hat hier ja jemand die Antworten auf meine Fragen oder eine ganz neue Idee, wie man dieses Problem lösen kann. Ich wäre auf jeden Fall sehr dankbar dafür!

[Michael T]

Ich gehöre nicht zu Unipark.

 

Auch wenn ich vor meinem geistigen Auge nicht so richtig sehe, wie du dir das vorstellst, sollten alle deine alle deine Punkte möglich sein, Grundkenntnisse in HTML, CSS und Javascript/jQuery vorausgesetzt. Für Punkt zwei sind fortgeschrittene Kenntnisse erforderlich.

 

1.1) Farbe ändern geht relativ einfach über die user.css. Die “Adresse” des Buttons ist “#os”, wenn du also dort (Umfragemenu > Layout > Profi-Editor > nach unten scrollen > user.css) beispielsweise folgendes einträgst (ohne >>>), wird der Button rot:

>>>

button#os {

background-color: red;

}

>>>

 

1.2) Das verschieben des Buttons würde ich mit jQuery machen. Den Button über die ID selektieren, in einer Variable ablegen, von der eigentlichen Position (d.h. aus dem DOM) entfernen und dann an der gewünschten Position einfügen. Nicht getestet.

 

2) Ich habe keine Ahnung was du hier genau machen möchtest. Was soll so aussehen wie ein Popup-Fenster? Eine Antwortmöglichkeit? Die ganze Frage? Die komplette Seite? Ohne Details würde ich einen Screenshot vorschlagen, den du mittels jQuery einblenden könntest. Wenn das ganze interaktiv sein soll, du Klicks auf Taskleiste usw erfassen möchtest, musst du das Fenster dynamisch mit jQuery erstellen und dann bei Bedarf einblenden.

 

3) Das ist wieder etwas einfacher. Jede Frage hat eine eindeutige ID (bei mir eine siebenstellige Ziffernkombination), welche im Fragebogeneditor rechts neben der Fragenbezeichnung zu sehen ist. Dann musst du wieder in die user.css, dort fügst du folgenden Eintrag hinzu (“1234567” ersetzt du durch deine FragenID):

>>>

.nameq_1234567, .nameq_1234567 label, .nameq_1234567 .title {

font-family: “Courier New”;

}

>>>

 

An dieser Stelle noch die Info dass die verwendete Schriftart natürlich auf dem Zielsystem (Smartphone, Tablet, PC, Mac, …) vorhanden sein muss. Falls nicht, verwendet der Browser was er gerade hat – und dass kann von Browser zu Browser und von Betriebssystem zu Betriebssystem unterschiedlich sein. Alternativ dazu verwendest du eine Online-Schriftart die der Browser herunterladen kann (auf Dateigröße achten).

[Fabiana Mahlke]

Schon einmal vielen Dank für deine Antwort! Leider sieht es mit den erforderlichen Kenntnissen bei mir schlecht aus, aber vielleicht geht ja dennoch einiges. Wenn es okay ist, hätte ich noch ein paar Rückfragen.

 

1.1) Das gilt dann ja für alle Buttons. Kann ich etwas ergänzen, damit es nur bei bestimmten Buttons (nur auf zwei Seiten) in einer anderen Farbe angezeigt wird?

1.2) Da habe ich ehrlich gesagt gar keine Ahnung, was ich da machen muss.

3) Bisher ändert es bei mir so nur die Antwortmöglichkeiten, nicht den Fragetext an sich. Was mache ich da falsch?

[Michael T]

1.1)

Das ist mit der user.css nicht mehr möglich, da vor einigen Jahren die SeitenID durch Unipark/Questback aus den Templates entfernt wurde. Du könntest die Templates anpassen, dass die ID wieder mit ausgegeben wird (ist nicht viel, vielleicht 25 Zeichen), aber das sieht man bei Unipark nicht so gerne…

 

Alternativ erstellst du auf den betreffenden Seiten eine 998er Frage und fügst dort folgenden Code ein. Wichtig ist, dass das als Code und NICHT als Text eingefügt wird. Dazu gibt es in der Leiste mit den Formatierungsanweisungen wie Fett, Kursiv usw einen Button der so aussieht “<>”. Dieser Button ist leider nicht bei allen verfügbar und muss ggf. von Unipark freigeschaltet werden oder ich kann dich darum herum lotsen, der Einfachheit halber gehe ich aber davon aus, dass der Button da ist. In die Frage fügst du also folgenden Code ein (alles zwischen >>>)

>>>

<script>

jQuery(document).ready(function() {

jQuery(‘#os’).css(‘background-color’, ‘red’);

});

</script>

>>>

 

1.2) Wo soll der Button denn hin? Ich würde davon abraten die Navigationselemente des Fragebogens zu verschieben oder neu anzuordnen – das ist inkonsistent mit den voran- und nachgestellten Seiten. Könnte für deine Teilnehmer auch ein Abbruch-Kriterium sein – für mich wäre es das.

 

3)

Habe es gerade nochmal bei mir getestet, ist kein Tippfehler drin. Allerdings wird die Ausfüllanweisung der Frage mit dem vorherigen CSS Block nicht umformatiert, die Korrektur sieht so aus:

>>>

.nameq_9440797, .nameq_9440797 label, .nameq_9440797 .title, .nameq_9440797 .subtitle {

font-family: “Courier New”;

}

>>>

Du kannst das ganze bei dir nochmal auf Tippfehler prüfen. Vor jedem nameq muss ein Punkt stehen, vor label nicht, vor title und subtitle wieder ein punkt, kommata nach dem ersten nameq, nach label, nach .title und .subtitle. Hinter jeder ID ein Leerzeichen.

 

Da ich nicht zu Unipark gehöre, kann ich nicht in dein Projekt reinschauen – wenn du den Fehler mit der Schrift nicht selber findest, kann ich dir nur anbieten, dass du die betreffenden Seiten an den Anfang deines Fragebogens verschiebst, die Befragung dann öffentlich schaltest und mir den Link schickst, dann kann ich mir das direkt in der Befragung anschauen.

[Author]

Posts