newline in javafx fxml or css - javafx

Question

I'm new to javafx (and pretty much programming in general) and am trying to add \n characters to my fxml file. I've tried the text="${'10\nquestions'}" method as a test but I get can't resolve symbol '10\nquestions'. Learning how to put \n characters would be helpful but my actual problem comes from the Label fx:id questionText in quiz.fxml
quiz.fxml
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane fx:controller="app.java.controllers.QuizController" xmlns:fx="http://javafx.com/fxml">
<left>
<VBox fx:id="quizLeft">
<Label text="Java" />
<Label fx:id="numberOfQuestions" />
<Label fx:id="score" />
<Label text="Time taken: 2:34" />
</VBox>
</left>
<center>
<VBox id="quizCenter">
<VBox id="questionLabel">
<Label fx:id="questionNumber" />
<Label fx:id="questionText" />
</VBox>
<RadioButton fx:id="option1" >
<toggleGroup>
<ToggleGroup fx:id="answerList" />
</toggleGroup>
</RadioButton>
<RadioButton fx:id="option2" toggleGroup="$answerList" />
<RadioButton fx:id="option3" toggleGroup="$answerList" />
<RadioButton fx:id="option4" toggleGroup="$answerList" />
<StackPane id="submitButton">
<Button fx:id="submitAnswerButton" text="Submit" onAction="#submitAnswerButton"/>
</StackPane>
<Button text="test" onAction="#printQuestions"/>
<Button fx:id="homeButton" text="home" onAction="#backToWelcome"/>
</VBox>
</center>
</BorderPane>
currently, if a question is too long I get this.
UI image
that question field that runs too long is connected to questionTextLabel which is populated from a mock db of Questions. How can I get questions that are too long to wrap to multiline. I've tried multiple things with the css as well, like messing around with -fx-text-overrun. Here are the css and controller classes as well. You can also see my project structure and other class in the img provided above.
/*quiz.css*/
.root{
-fx-background-color: #1e349c;
}
#quizLeft{
-fx-background-color: #9c0e7c;
-fx-alignment: center;
-fx-spacing: 10px;
-fx-min-width: 300px;
}
.label{
-fx-text-fill: #fea2ff;
-fx-font-weight: bold;
-fx-font-size: 30px;
}
#quizCenter{
-fx-alignment: center;
}
#questionLabel{
-fx-padding: 70px;
-fx-alignment: center;
}
/*#questionText{*/
/* !*-fx-text-overrun: ;*!*/
/*}*/
.radio-button{
-fx-font-size: 30px;
-fx-text-fill: yellow;
-fx-font-weight: bold;
}
#submitButton{
-fx-padding: 60px;
-fx-font-size: 30px;
}
package app.java.controllers;
import app.java.dao.Question;
import app.java.services.SceneBuilder;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import java.net.URL;
import java.util.List;
import java.util.ResourceBundle;
public class QuizController extends Controller implements Initializable {
#FXML
Button submitAnswerButton;
#FXML
Label questionNumber;
#FXML
Label questionText;
#FXML
RadioButton option1;
#FXML
RadioButton option2;
#FXML
RadioButton option3;
#FXML
RadioButton option4;
#FXML
Button homeButton;
#FXML
Label score;
#FXML
Label numberOfQuestions;
#FXML
ToggleGroup answerList;
Question currentQuestion;
int correctAnswers;
int questionsAnswered;
int currentQuestionNumber;
List<Question> quizList;
SceneBuilder sb;
public void backToWelcome() throws Exception{
sb.setNewScene(homeButton, "welcome");
}
public void submitAnswerButton() throws Exception{
updateScore();
if(questionsAnswered == quizList.size()){
// games over
sb.setNewSceneWithParameters(submitAnswerButton, "endOfQuiz", score);
} else {
// continue to next question
currentQuestionNumber++;
currentQuestion = quizList.get(currentQuestionNumber);
setQuestionNumber(currentQuestionNumber);
setQuestionText(currentQuestion.getQuery());
setChoices(currentQuestion.getAnswers());
}
}
public void setQuestionNumber(int questionNumber){
this.questionNumber.setText("Question #" + (questionNumber + 1));
}
public Question getQuestionFromList(int nextQuestion){
return quizList.get(nextQuestion);
}
public void setQuestionText(String questionText){
this.questionText.setText(questionText);
}
public void setChoices(List<String> choices){
option1.setText(choices.get(0));
option2.setText(choices.get(1));
option3.setText(choices.get(2));
option4.setText(choices.get(3));
}
public boolean checkAnswer(String correctAnswer, String userGuess){
return correctAnswer.equals(userGuess);
}
public void updateScore(){
RadioButton selectedRadioButton = (RadioButton) answerList.getSelectedToggle();
boolean isCorrect = checkAnswer(currentQuestion.getCorrectAnswer(), selectedRadioButton.getText());
if(isCorrect){
correctAnswers++;
}
questionsAnswered++;
setScore();
}
public void printQuestions(){
quizList.forEach(System.out::println);
}
public void setScore(){
score.setText(correctAnswers + " correct out of " + questionsAnswered);
}
#Override
public void initialize(URL location, ResourceBundle resources) {
sb = new SceneBuilder();
currentQuestionNumber = 0;
questionsAnswered = 0;
correctAnswers = 0;
setScore();
}
#Override
public void initData(Object parameter) {
this.quizList = (List<Question>)parameter;
// Set first question
currentQuestion = getQuestionFromList(currentQuestionNumber);
setQuestionNumber(currentQuestionNumber);
setQuestionText(currentQuestion.getQuery());
setChoices(currentQuestion.getAnswers());
this.numberOfQuestions.setText(quizList.size() + " questions");
}
}
Any help and advice I could get would be greatly appreciated. Thanks!
edit:
I know SceneBuilder can do a lot of things for me but since this is my first try at it, I wanna write it myself so I know how to do it manually.