Hi, so I am quite new to angular and I am developing a page where an app can randomly generate a maths quiz. Basically, you enter a minimum number and maximum number and then choose and arithmetic maths function. It then chooses random numbers between the min and the max and displays them as sums with the answer. Every time I try to generate a quiz no text show up but I don’t get any errors. I was wondering id anyone could tell me what I am doing wrong or could help me fix it. Thanks in advance.
HTML:
<ion-header>
<ion-navbar>
<ion-title>Create A Quiz!</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding id="page">
<table style="border: 0px">
<tr>
<td style="width: 75%">Enter a minimum number:</td>
<td><ion-input type="number" id="MinNum"></ion-input></td>
</tr>
<tr>
<td style="width: 75%">Enter a maximum number:</td>
<td><ion-input type="number" id="MaxNum"></ion-input></td>
</tr>
<tr>
<ion-item>
<ion-label>Select an operator: </ion-label>
<ion-select id="operator">
<ion-option value="add">Addition</ion-option>
<ion-option value="sub">Subtraction</ion-option>
<ion-option value="mult">Multiplication</ion-option>
<ion-option value="div">Division</ion-option>
</ion-select>
</ion-item>
</tr>
</table>
<br>
<button ion-button (click)="createQuiz()">Generate Quiz!</button>
<br>
<div *ngIf="generate">
<h4>Quiz Created</h4>
<div *ngFor="let q of this.quiz.questions">
<label>Q {{q.id}}</label>: {{q.num1}} {{q.operator}} {{q.num2}} = {{q.answer}}
</div>
</div>
</ion-content>
TypeScript
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
private generate : boolean = false;
private quiz : Quiz = new Quiz();
private error : string = '';
private success : string = '';
private numOfQuestion : number = 5;
private altAdditionWords = ['+','Plus','Add'];
private altSubtractionWords = ['-','Subtract','Minus','take away'];
private altMultiplicationWords = ['x','Multiply','times'];
private altDivisionWords = ['÷','Divide','Divided by'];
randomNumber = () : number => {
return Math.floor(Math.random()*(this.quiz.MaxNum - this.quiz.MinNum))+1;
}
randomAddOperator = () : string => {
return this.altAdditionWords[Math.floor(Math.random()*this.altAdditionWords.length)];
}
randomSubtractOperator = () : string => {
return this.altSubtractionWords[Math.floor(Math.random()*this.altSubtractionWords.length)];
}
randomMultiplicationOperator = () : string => {
return this.altMultiplicationWords[Math.floor(Math.random()*this.altMultiplicationWords.length)];
}
randomDivisionOperator = () : string => {
return this.altDivisionWords[Math.floor(Math.random()*this.altDivisionWords.length)];
}
createQuiz(){
if(this.quiz.questions.length > 0){
this.quiz.questions = [];
}
if(this.quiz.MinNum >= this.quiz.MaxNum ){
this.error = 'Maximum Number should be greater than Minimum Number';
}
else {
this.generate = true; this.error = ''; this.success = '';
for(let i = 1; i <= this.numOfQuestion; i++) {
let q = new Question();
if(this.quiz.operator ==='Addition'){
q.create(i, this.randomNumber(),this.randomAddOperator(), this.randomNumber(),null);
q.answer=(q.num1+q.num2);
this.quiz.insertQuestion(q);
}
if(this.quiz.operator ==='Subtraction'){
q.create(i, this.randomNumber(),this.randomSubtractOperator(), this.randomNumber(),null);
while(q.num1 < q.num2){
q.num1=this.randomNumber();q.num2=this.randomNumber();
}
q.answer=(q.num1-q.num2);
this.quiz.insertQuestion(q);
}
if(this.quiz.operator ==='Multiplication'){
q.create(i, this.randomNumber(),this.randomMultiplicationOperator(), this.randomNumber(),null);
q.answer=(q.num1*q.num2);
this.quiz.insertQuestion(q);
}
if(this.quiz.operator ==='Division'){
q.create(i, this.randomNumber(),this.randomDivisionOperator(), this.randomNumber(),null);
while(q.num1 % q.num2 !==0){
q.num1=this.randomNumber();
q.num2=this.randomNumber();
}
q.answer=(q.num1/q.num2);
this.quiz.insertQuestion(q);
}
}
}
}
}
export class Question {
public id : number = 0;
public num1 : number = 0;
public operator : string = '';
public num2 : number = 0;
public answer : number = 0;
create = (id : number,
num1 : number,
operator : string,
num2 : number,
answer : number
) => {
this.id = id;
this.num1 = num1;
this.operator = operator;
this.num2 = num2;
this.answer = answer;
}
}
export class Quiz {
public id : number = 0;
public teacherID : number = 0;
public level : string = '';
public operator : string = '';
public MinNum : number = 0;
public MaxNum : number = 0;
public datePublished : string = '';
public questions : Question[] = [];
create = (id : number,
teacherID : number,
level : string,
operator : string,
minNumber : number,
maxNumber : number,
datePublished : string,
) => {
this.id = id;
this.teacherID = teacherID;
this.level = level;
this.operator = operator;
this.MaxNum = minNumber;
this.MinNum = maxNumber;
this.datePublished = datePublished;
}
insertQuestion(q) {
this.questions.push(q);
}
}
