Question

我试图通过单击下一步按钮来增加问题索引，看来我没有得到任何东西。

index: number = 1;  
currentQuestion;

next() {
        this.index++;
    }

My Service

    getQuestions(category) {
       return this.http.get(this.url + '&category=' + category + '&type=multiple')
         .pipe(catchError(this.errorHandler));
    }

HTML：

<ion-col size="6">
          <ion-button size="small" color="tertiary" (click)="next()">Next</ion-button>
        </ion-col>

Answer 1

如果这是您要引用的API：

https://opentdb.com/api_config.php

然后，它每次仅返回一组随机问题。

API中没有next的概念。

只需第二次调用相同的网址。

Answer 2

我需要在这里发布此信息，以供将来想要使用opentdp api的人使用。

我知道了。

首先使用ngOnInit（）或IonViewWillEnter（）//导致我使用离子4

        IonViewWillEnter() {
          // use Ionic storage to store the quizIndex and initialize to 0
        //then get the current index after the api call.

          this.storage.get('quizIndex').then(val => {
             this.quizIndex = val;
             console.log(this.quizIndex);
           });
          //now set the data returned from api to a variable called currentQuestion

this.storage.get('questions').then(val => {
                this.questions = JSON.parse(val);
                this.totalQuizNum = this.questions.results.length;
                console.log(this.totalQuizNum);
                console.log(this.questions);

                if (this.questions !== null && this.totalQuizNum >= this.quizIndex + 1) {
                    this.currentQuestion = this.questions.results[this.quizIndex];
                    console.log(this.currentQuestion);
                    this.answers = this.currentQuestion.incorrect_answers;
                    this.correctAnswer = this.currentQuestion.correct_answer;
                    this.answers.push(this.correctAnswer);
                    this.shuffleAnswers(this.answers);
                    console.log(this.answers);
                } else if (this.totalQuizNum < this.quizIndex + 1) {
                    // do something if the total quiz requested from the api = 0 and quizIndex = 0
                }
            });

        }

由于next（）方法而重复此方法...请参见下文...

tracks() {
        this.storage.get('questions').then(val => {
            this.questions = JSON.parse(val);
            this.totalQuizNum = this.questions.results.length;

            if (this.questions !== null && this.totalQuizNum >= this.quizIndex + 1) {
                this.currentQuestion = this.questions.results[this.quizIndex];
                console.log(this.currentQuestion);
                this.answers = this.currentQuestion.incorrect_answers;
                this.correctAnswer = this.currentQuestion.correct_answer;
                this.answers.push(this.correctAnswer);
                this.shuffleAnswers(this.answers);
                console.log(this.answers);
            } else if (this.totalQuizNum < this.quizIndex + 1) {
                // this.navCtrl.navigateForward('/home');
            }
        });
    }

next() {
        this.tracks();// i don't want to push answers every time i call the next()
        //so that answers won't be pushed twice, causing answer index to return 5 items or answers
        this.quizIndex++;
        console.log(this.quizIndex);
        if (this.quizIndex === this.totalQuizNum) {
            this.showAlert();
            this.navCtrl.navigateForward('/result');
        }
        console.log(this.currentQuestion);
    }

<ion-col size="6">
  <ion-button size="small" (click)="next()" color="tertiary" [disabled]="if 
    something"> Next
  </ion-button>
</ion-col>

谢谢大家！

如何使用按钮增加测验应用程序中的问题索引

2 个答案: