Is there a better way to process user text in this way?

Question

I want there to be a label and a textbox. In the textbox the user types in what is in the label, like a typing test. If the user types the right character in then the character in the label becomes green.

I am going to implement this in JavaFX. I will basically transform the label into an array and see if it matches anything in the textbox. I'm not sure what I need to use to to check if the textbox character matches the array.

Answer 1

I wrote a simple test JavaFX application that do what you are asking.

This is the result

And this is the code

package sample;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        primaryStage.setTitle("Hello World");
        Scene scene = new Scene(new Group(), 300, 275);

        //Create a FlowPane that will contain many Text.
        FlowPane flowLabel = new FlowPane(Orientation.HORIZONTAL);
        flowLabel.setBackground(new Background(new BackgroundFill(Color.BEIGE, CornerRadii.EMPTY, Insets.EMPTY)));
        flowLabel.setColumnHalignment(HPos.LEFT);

        //This is the label text. The text that the user must insert
        final String text = "Hello world!";

        //Create a Text object for each character
        final Text[] characters = new Text[text.length()];
        for(int i = 0; i < text.length(); i++) {
            Character c = text.charAt(i);
            characters[i] = new Text(c.toString());
            flowLabel.getChildren().add(characters[i]);
        }

        //Create the text field and add a listener to do something when the text change.
        TextField field = new TextField();
        field.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
                //Do the magic
                String fieldText = newValue;
                if(text.startsWith(fieldText)) {
                    for(int i = 0; i < text.length(); i++) {
                        if(i < fieldText.length()) {
                            characters[i].setFill(Color.GREEN);
                        } else {
                            characters[i].setFill(Color.BLACK);
                        }
                    }
                } else {
                    for(int i = 0; i < text.length(); i++) {
                        characters[i].setFill(Color.RED);
                    }
                }
            }
        });

        FlowPane pane = new FlowPane(Orientation.HORIZONTAL);
        pane.setVgap(8);
        pane.getChildren().add(flowLabel);
        pane.getChildren().add(field);

        ((Group)scene.getRoot()).getChildren().add(pane);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

I think that this isn't the best way to do that, but will help you to proceed.

Answer 2

I used onkeyreleased in my version. It now handles space:

import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication35 extends Application {

    @Override
    public void start(Stage primaryStage) {        

        //Make each string char a text object
        String text = "Hello World!";
        List<Text> characters = new ArrayList();
        for(int i = 0; i < text.length(); i++)
        {
            characters.add(new Text(text.charAt(i) + ""));
        }

        //create text area and set on key release listener
        TextArea textarea = new TextArea();
        textarea.setOnKeyReleased(new EventHandler<KeyEvent>(){
            @Override
            public void handle(KeyEvent event) {                
                for(int i = 0; i < characters.size(); i++)
                {        
                    //handle when index i is less than the number of characters typed in the text area
                    if(i < textarea.getText().length())
                    {
                        //if the characters at the given index are equal, set the text object at that index to green
                        if(textarea.getText().charAt(i) == characters.get(i).getText().charAt(0))
                        {
                            characters.get(i).setFill(Color.GREEN);//If chars at given index are equal set to green: exception - space
                            if(textarea.getText().charAt(i)== '_')//Your text charters can not be char underscore by default. If so this will screw up.
                            {//if underscore is type make the space red even though it equals the red underscore
                                characters.get(i).setText("_"); 
                                characters.get(i).setFill(Color.RED);
                            }
                            else if(characters.get(i).getText().equals("_") && characters.get(i).getFill().equals(Color.RED)) 
                            {//if the text object was changed to underscore and the textarea char is now a space, change the text object back to space
                                if(textarea.getText().charAt(i) == ' ')
                                {
                                    characters.get(i).setText(" ");
                                }                                
                            }
                        }                        
                        else//if the characters at the given index are not equal, set the text object at that index to red
                        {                            
                            if(characters.get(i).getText().equals(" "))
                            {
                                characters.get(i).setText("_");
                            }
                            characters.get(i).setFill(Color.RED);
                        }
                    }
                    else//handle when index i is greater than or equally to the number of characters typed in the text area
                    {
                        characters.get(i).setFill(Color.BLACK);//set the text object at given index to black if the hasn't been enough charaters type to reach this index
                        if(characters.get(i).getText().equals("_"))
                        {
                            characters.get(i).setText(" ");
                        }
                    }
                }
            }
        });


        HBox hbox = new HBox();//holds text objects
        hbox.getChildren().addAll(characters);//add text objects to hbox   
        VBox root = new VBox();//holds hbox and textarea
        root.getChildren().addAll(hbox, textarea);//add hbox. add textarea

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Note: Your String text can not contain the underscore character '_'. It will always be red if it does.