Input a textfield with characters in different colors

Phaser 3
1

Let me first introduce myself: I’m a teacher in a primary school in Belgium. In the past I made an educational program ‘Digitee’ in Flash. The purpose of this game was dictation: the pupil heard a word (in Dutch) and tried to type this word. When the character was correct, you saw this character in green, when it was wrong, the character was red. See the image below:
https://photos.app.goo.gl/yumsqH339iE9PCx1A

I made this program in Flash, but now I’m trying to make the same programma with Phaser 3:
https://photos.app.goo.gl/7M7PdDenBbaKCebn7

I don’t succeed to show the characters I type in different colors on the screen: green when the letter is correct, red when it’s wrong.

So I’m stuck: http://edubits.eu/eduprogs/digitee/, hopely someone can help me. Thanks in advance.

2

Welcome. I think this tutorial will help you: https://phasergames.com/phaser-3-input-text-form-ui-part-1/

3

Hi @Patrick_Keysabyl1 ,
You can try something like this:

Regards.

4

This works indeed, thank you for this solution, but there is one problem: it doesn’t work on tablet / iPad.

5

I’ll give this a try, thx.