My app is designed for students and it automatically generates questions (such as distance/time questions), includes animations, and grades student answers. Here is a preview:
https://i.sstatic.net/br8Ly.png
Achieving my goal Although the code works fine overall, I am looking to enhance one specific part to make it more elegant. I'm curious if there's a JavaScript solution to transform a function that asks 'is it this? is it this? is it this? ...' into 'is it one of these, and if so which one is it?'.
No expected or actual results are provided since the functionality works smoothly without errors. However, here's a link to Stack Blitz for demonstration: https://stackblitz.com/edit/angular-qrldtz?devtoolsheight=33&file=src/app/app.component.ts
Example of HTML with Angular syntax: The iteration over questions displayed on the right-hand side of the image above.
<form [formGroup]="formAnswers" (ngSubmit)="answersSubmitted()">
<div class="question-container" *ngFor="let question of questionBank[0].questions; let i = index">
<div class="question-question">{{ question.question }}</div>
<div class="question-input">
<input type="text" formControlName="{{ question.id }}" class="answer-input" maxlength="8">
</div>
</div>
<button type="submit" style="float: right;">Submit Answers</button>
</form>
Here's a simplified example of the relevant TypeScript code. The part I aim to streamline is within the 'answersSubmitted()' function which validates student answers against stored values.
formAnswers: FormGroup;
velocity: number = 0;
valueInitialSpeed = {'x': 0, 'y': 0};
// This represents the database of questions. It contains only one sample question for illustration.
questionBank = [
{
'questionText': `A tennis ball is hit from an overhand serve towards a net.`,
'startVelocityRange': 25.2,
'angleAppliedRange': 12,
'xAccelerationRange': 0,
'yAccelerationRange': 0,
'gravity': 9.81,
'startHeightRange': [0, 0],
'dataGiven': { 'velocity': true, 'yInitSpeed': false, 'xInitSpeed': false},
'questions': [
{
'question':'What is the initial vertical velocity of the ball',
'answerValue': 'yInitSpeed', // Identifies the answer referring to the dataGiven object above.
'id':'getYVelocity' // Relates the entered answer to the variable above.
}
]
}
];
answersSubmitted() {
this.questionBank[0].questions.forEach(question => {
var value = parseFloat(this.formAnswers.value[question.id]);
if(question.answerValue === 'xInitSpeed') {
if(this.percentageWithinBounds(value, this.valueInitialSpeed.x, this.tolerance)) {
this.correctAnswer(question);
}
} else if(question.answerValue === 'yInitSpeed') {
if(this.percentageWithinBounds(value, this.valueInitialSpeed.y, this.tolerance)) {
this.correctAnswer(question);
}
} else {}// if{} ... etc etc
});
}
private percentageWithinBounds(x, y, z) {
// Currently not applicable.
}
private correctAnswer(x) {
// Currently not applicable.
}
I believe some adjustments might be needed in the questionBank array to accommodate this improvement. I am open to modifications to simplify the process for future use and to enhance more complex simulations down the line.