Power Apps – Steuerelement Timer einsetzen für ein Quiz

In diesem Blog stelle ich eine vielseitige Möglichkeit vor, wie mit einem Steuerelement „Timer“ andere Steuerelemente nach einer bestimmten Zeit ausgeblendet werden können.

Die Frage stellt sich immer wieder in meinen Kursen, wie lässt sich in einer App etwas zeitabhängig steuern.

Fallbeispiel: Ein Steuerelement „Timer“ sorgt im Zusammenhang mit anderen Spurenelementen dafür, dass auf einem Bildschirm bspw. Für ein Quiz die Anzeige von Text und Schaltflächen gesteuert wird.

Nachfolgend beschreibe ich mein Vorgehen, um dieses Ziel zu erreichen. Aus dem Screenshot ist ein einfach aufgebauter Bildschirm zur Veranschaulichung des Vorgehens zu sehen.

Der User klickt auf die Schaltfläche „Frage starten“, die Zeit über das Steuerelement „Timer“ beginnt zu laufen, nach genau 6 Sekunden verschwindet sowohl die Frage als auch die Möglichkeit auf die Schaltfläche „Antwort“ zu klicken. Dies alles aufgrund des Timers und der variabel festgelegten Zeit von 6 Sekunden.

clip_image002

Nach Ablauf der oben angezeigten Zeit wird sowohl die Frage (Textfeld) als auch die Schaltfläche „Antworten“ ausgeblendet.

Mit dieser Technik und diesem Beispiel lassen auf vielseitige Lösungen erstellen und umsetzen.

clip_image004

Hierzu bedarf es einiger Konfiguration von Steuerelementen und des Einsatzes von Funktionen.

Dazu stelle ich die wesentlichen Steuerelemente vor und deren Konfiguration.

Bevor ich die Steuerelementdefinitionen aufliste, wird eine Konfiguration des Bildschirms benötigt. Die Eigenschaft „OnVisible“ erhält eine Variable „countervalue“ und eine zweite „timerstart“ zur weiteren Steuerung der nachfolgenden Objekte.

Screen1 OnVisible: Set(countervalue;Blank());;Set(timerstart;0)

Hinweis: Sobald der Bildschirm eingeblendet wird, werden die o.g. Variablen gesetzt.

Folgende Steuerelemente gilt es hinzuzufügen (Registerkarte „Einfügen“):

Steuerelemet „Timer“

Eigenschaft AutoStart: If(timerstart=1;true)

Eigenschaft OnTimerEnd: Set(countervalue;"fertig");;Set(timerstart;0)

Eigenschaft Text: Right(Text(Time(0; 0; (Timer1.Duration-Timer1.Value)/1000); "hh:mm:ss");2)

Hinweis: Der „Timer“ startet, wenn die Variable „timerstart“ den Wert 1 aufweist, nach Start der App lautet dieser 0, sobald ein Klick auf die Schaltfläche „Frage stellen“ erfolgt, wird er auf 1 verändert, der „Timer“ fängt somit an zu laufen.

Steuerelement „Bezeichnung“ (Anzeige steuern)

Eigenschaft Text: countervalue (Variable)

Steuerelement „Bezeichnung“ (Antwort)

Eigenschaft Text: If(Timer1.Text="00";"fertig";"läuft")

Hinweis: Es werden behelfsweise zwei Steuerelemente vom Typ „Bezeichnung“ auf dem Bildschirm hinzugefügt. Diese zeigen Werte „läuft“ bzw. „fertig“ an. Diese werden zur weiteren Steuerung der Anzeige der Frage, der Schaltfläche, sowie der Anzeige des Textes nach Ablauf der Zeit vom Timer verwendet.

Steuerelement “Schaltfläche” (Frage stellen)

Eigenschaft OnSelect: Set(timerstart;1)

Steuerelement “Schaltfläche” (Antworten)

Eigenschaft Visible: If(countervalue="läuft";true)

Hinweis: Über die Eigenschaft “Visible“ lässt sich jedes einzelne Steuerelement steuern hinsichtlich ob es angezeigt wird oder ausgeblendet wird.

SteuerelementTexteingabe“ (Frage)

Eigenschaft Visible: If(Anzeige_steuern.Text="läuft";true;false)

SteuerelementTexteingabe“ (Anzeige Text nach Ablauf der Zeit)

Eigenschaft Visible: If(Antwort.Text="fertig";true;false)

Hinweis: Das Anzeigen und das Ausblenden der anderen Steuerelemente wird von diesen beiden Feldern aus gesteuert.

Bei Interesse kann ich dieses Beispiel zum Download anbieten. Bitte kontaktieren Sie mich unter: remigiuszs@ppedv.de

Viel Spaß damit

Kommentare sind geschlossen