问题描述
我正在为一些学生编写一个应用程序，该应用程序会自动生成问题（例如速度=距离/时间问题），进行一些动画处理并自动为学生给出的答案评分。看起来像这样：
关于我的目标的详细信息 一般而言，代码不是问题，并且一切正常，但我想让一部分变得更优雅，并想知道是否有Javascript解决方案可以做到这一点。本质上，我要执行的功能是说'是这个吗？是这个吗是这个吗... ”变成“ 是其中之一，如果是，是哪一个？”。
目前尚无预期或实际结果，因此我正在尝试精简。同样，没有错误。
这是一个堆叠闪电战：https://stackblitz.com/edit/angular-qrldtz?devtoolsheight=33&file=src/app/app.component.ts
带有 Angular 语法的HTML 示例：这会遍历当前问题所需显示的问题。这是上图的右侧。
<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>
我在下面提供了适用的打字稿代码的精简示例。我想简化的部分在“ answeRSSubmitted（）”函数中。提交答案后，这就是从HTML进行的调用。它将对照代码中存储的值检查输入的值。
formAnswers: FormGroup;
veLocity: number = 0;
valueInitialSpeed = {'x': 0,'y': 0};
// this is the database of questions. Only one is provided here as an example
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',// this helps identify the answer and refers to the dataGiven object above.
'id':'getYVeLocity' // this is the identification which gets put onto the input. It relates the answer given to the variable above.
}
]
}
];
answeRSSubmitted() {
this.questionBank[0].questions.forEach(question => {
// gets the value entered by the student from the relevant input Box.
var value = parseFloat(this.formAnswers.value[question.id]);
// xInitSpeed refers to questionBank[0].question[questionid].answerValue
// it identifies which value to check the input against in the questionBank array
if(question.answerValue === 'xInitSpeed') {
// this function checks whether the input answer and the calculated answer are roughly equal.
// valueInitialSpeed.x is calculated when the question is generated.
// this.tolerance is just a percentage of how tolerant we are being with answer values
if(this.percentageWithinBounds(value,this.valueInitialSpeed.x,this.tolerance)) {
// correctanswer is just what functions we run when the answer given is correct
this.correctAnswer(question);
}
// this repetition is what I am interested in streamlining
} 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) {
// not applicable for Now.
}
private correctAnswer(x) {
// not applicable for Now.
}
我觉得questionBank数组可能需要稍作更改以适应此情况，因此我愿意进行更改以简化此过程。这段代码虽然没有问题，但我将重用此功能，并且希望简化编码过程以及将来进行的任何更复杂的仿真。
解决方法
好的，因此看起来您通过返回引用答案的变量而不是简单地返回答案本身来使事情过于复杂。
https://stackblitz.com/edit/angular-ahlosh?file=src/app/app.component.ts
通过将答案移到问题的属性中，我已经大大简化了事情。
如果您需要更复杂的内容，可以将answer转换为计算适当值的函数，如下所示：
https://stackblitz.com/edit/angular-zckmwj?file=src%2Fapp%2Fapp.component.ts
您可以将所需的任何逻辑放入答案函数中，甚至可以传递给定答案，并在适当时返回true或false。
关于小问题，我还留下了其他几条评论。我强烈建议您在tsconfig.json中启用noImplicitAny-这将迫使您键入所有内容。如果您不这样做，那么使用Typescript有什么意义呢？有类型可以帮助您！