单选按钮响应计数

Question

我有这个html页面，它有5个问题。我试图根据他们的反应将用户重定向到不同的页面。所以我试着捕捉到"是的"这里的反应。尝试将响应捕获为1(表示是)0(表示否)。但不能正确地将它们相加(1+1 = 11)。我是编程新手。在项目中使用angular。这是我的第一个问题。有人能帮忙吗?

<!-- quizlist -->
<div class="row">
<div class="col-lg-8 col-md-11 mx-auto">
<div class="shadow">
<div class="content-box mt-4">
<div class="quizlist">
<h3>Take the inflammatory Back Pain Quiz</h3>
<div class="item">
<div class="row align-items-center">
<div class="col-lg-10 col-md-10">
<p>Did your backpain and stiffness start before the age of 45?</p>
</div>
<div class="col-lg-2 col-md-2">
<div class=" float-end">
<div class="radio-tile-group d-flex">
<div class="input-container yes">
<input id="yes" class="radio-button" type="radio" name="radio1" />
<div class="radio-tile">
<div class="icon yes-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" />
</svg>
</div>
<label for="yes" class="radio-tile-label"></label>
</div>
</div>
<div class="input-container no">
<input id="no" class="radio-button" type="radio" name="radio1" />
<div class="radio-tile">
<div class="icon no-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" />
</svg>
</div>
<label for="no" class="radio-tile-label"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row align-items-center">
<div class="col-lg-10 col-md-10">
<p>Did your pain and stiffness develop gradually, with symptoms peristing at least three months?</p>
</div>
<div class="col-lg-2 col-md-2">
<div class=" float-end">
<div class="radio-tile-group d-flex">
<div class="input-container yes">
<input id="yes" class="radio-button" type="radio" name="radio2" />
<div class="radio-tile">
<div class="icon yes-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" />
</svg>
</div>
<label for="yes" class="radio-tile-label"></label>
</div>
</div>
<div class="input-container no">
<input id="no" class="radio-button" type="radio" name="radio2" />
<div class="radio-tile">
<div class="icon no-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" />
</svg>
</div>
<label for="no" class="radio-tile-label"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row align-items-center">
<div class="col-lg-10 col-md-10">
<p>Did your backpain and stiffness start before the age of 45?</p>
</div>
<div class="col-lg-2 col-md-2">
<div class=" float-end">
<div class="radio-tile-group d-flex">
<div class="input-container yes">
<input id="yes" class="radio-button" type="radio" name="radio3" />
<div class="radio-tile">
<div class="icon yes-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" />
</svg>
</div>
<label for="yes" class="radio-tile-label"></label>
</div>
</div>
<div class="input-container no">
<input id="no" class="radio-button" type="radio" name="radio3" />
<div class="radio-tile">
<div class="icon no-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" />
</svg>
</div>
<label for="no" class="radio-tile-label"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row align-items-center">
<div class="col-lg-10 col-md-10">
<p>Did your pain and stiffness develop gradually, with symptoms peristing at least three months?</p>
</div>
<div class="col-lg-2 col-md-2">
<div class=" float-end">
<div class="radio-tile-group d-flex">
<div class="input-container yes">
<input id="yes" class="radio-button" type="radio" name="radio4" />
<div class="radio-tile">
<div class="icon yes-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" />
</svg>
</div>
<label for="yes" class="radio-tile-label"></label>
</div>
</div>
<div class="input-container no">
<input id="no" class="radio-button" type="radio" name="radio4" />
<div class="radio-tile">
<div class="icon no-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" />
</svg>
</div>
<label for="no" class="radio-tile-label"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row align-items-center">
<div class="col-lg-10 col-md-10">
<p>Did your backpain and stiffness start before the age of 45?</p>
</div>
<div class="col-lg-2 col-md-2">
<div class=" float-end">
<div class="radio-tile-group d-flex">
<div class="input-container yes">
<input id="yes" class="radio-button" type="radio" name="radio5" />
<div class="radio-tile">
<div class="icon yes-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z" />
</svg>
</div>
<label for="yes" class="radio-tile-label"></label>
</div>
</div>
<div class="input-container no">
<input id="no" class="radio-button" type="radio" name="radio5" />
<div class="radio-tile">
<div class="icon no-icon">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" />
</svg>
</div>
<label for="no" class="radio-tile-label"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-end mt-3">
<a href="/recommendation" class="btn primary">View Score</a>
</div>
</div>
<div class="bottom-detail">
<p>This quiz is adapted from the ASAS (The Assessment of SpondyloArthritis International Society) Criteria for identifying inflammatory back pain.</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

你可以声明一个包含问题和答案的对象类型:

type Question = {
question: string;
answer?: boolean;
};

answer?上的问号表示该属性可以是undefined。我们将用它来表示一个未回答的问题。

然后在组件中创建一个问题数组:

export class AppComponent {
questions: Question[] = [
{
question: 'Did your backpain and stiffness start before the age of 45?',
answer: undefined,
},
{
question:
'Did your pain and stiffness develop gradually, with symptoms peristing at least three months?',
answer: undefined,
},
{
question:
'Did your pain and stiffness develop gradually, with symptoms peristing at least three months?',
answer: undefined,
},
{
question: 'Did your backpain and stiffness start before the age of 45?',
answer: undefined,
},
];
setAnswer(q: Question, a: boolean) {
q.answer = a;
}
}

我还包含了一个函数来设置答案，我们将附加到每个单选按钮的click事件。

我们可以使用ngFor指令为每个问题重复一些html。

<div class="row">
<div class="col-lg-8 col-md-11 mx-auto">
<div class="shadow">
<div class="content-box mt-4">
<div class="quizlist">
<h3>Take the inflammatory Back Pain Quiz</h3>
<ng-container *ngFor="let question of questions; let i = index">
<div class="item">
<div class="row align-items-center">
<div class="col-lg-10 col-md-10">
<p>
{{ question.question }}
</p>
</div>
<div class="col-lg-2 col-md-2">
<div class="float-end">
<div class="radio-tile-group d-flex">
<div class="input-container yes">
<input
id="yes{{ i }}"
class="radio-button"
type="radio"
name="radio{{ i }}"
(click)="setAnswer(question, true)"
/>
<div class="radio-tile">
<div class="icon yes-icon">
<svg
fill="#000000"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"
/>
</svg>
</div>
<label
for="yes{{ i }}"
class="radio-tile-label"
></label>
</div>
</div>
<div class="input-container no">
<input
id="no{{ i }}"
class="radio-button"
type="radio"
name="radio{{ i }}"
(click)="setAnswer(question, false)"
/>
<div class="radio-tile">
<div class="icon no-icon">
<svg
fill="#000000"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"
/>
</svg>
</div>
<label
for="no{{ i }}"
class="radio-tile-label"
></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<div class="text-end mt-3">
<a href="/recommendation" class="btn primary">View Score</a>
</div>
</div>
<div class="bottom-detail">
<p>
This quiz is adapted from the ASAS (The Assessment of
SpondyloArthritis International Society) Criteria for identifying
inflammatory back pain.
</p>
</div>
</div>
</div>
</div>
</div>

双括号{{ }}允许您将组件中的变量放入html模板中。请注意，我如何使用i(问题数组的索引)为每个单选按钮提供唯一的id，并为每个组提供唯一的名称。

注意，我已经将函数调用附加到每个单选按钮的click事件。

这里有一个函数，我们可以用它来计算答案并记录它们:

count() {
let yes = 0;
let no = 0;
let unanswered = 0;
for (const q of this.questions) {
if (q.answer) yes++;
else if (q.answer === false) no++;
else unanswered++;
}
console.log('You answered yes', yes, 'times.');
console.log('You answered no', no, 'times.');
console.log('You did not answer', unanswered, 'times.');
}

我将把它们连接到一个按钮上进行测试:

<button (click)="count()">Log Result</button>

下面是一个工作示例:https://stackblitz.com/edit/angular-ivy-ey19hv?file=src/app/app.component.ts

---

这是一种创建表单的原始方式，没有什么问题，但你可能想要做Angular的表单教程:https://angular.io/guide/forms-overview

有两种主要方法:

html比较重的模板驱动表单:https://angular.io/guide/forms

响应式表单:https://angular.io/guide/reactive-forms

也有预制组件，使您的生活更轻松:https://material.angular.io/components/radio/overview