How do I use replaceWith to move explanation text in place of question and remove the original div?

Question

I'm building a quiz app in Angular and I've "moved" the explanation into the question box using replaceWith, but now I need help with hiding the original explanation below the correct answer. replaceWith should occur only when the correct answer is chosen. The explanation has to move when the correct answer is selected to each question in the quiz and at the same time remove the original explanation from below the correct answer. When I advance to the next question, the explanation from the previous question is in the place of the question box but it should be reset to the current question, not sure how to go about doing this. Please see my code below.

<div [hidden]="!isCorrect(option.optionValue)">
  <div id="explanation">
    Option {{ question.answer }} was correct because {{ question.explanation }}.
  </div>
</div>

ngAfterViewInit() {
  this.itemFrom = document.getElementById('explanation');
  this.itemTo = document.getElementById('question');
}

radioChange(answer) {
  this.question.selectedOption = answer;
  this.answer.emit(answer);
  this.moveExplanation(this.itemFrom, this.itemTo);

  if (this.option === this.question.answer && this.question.selectedOption === this.question.answer) {
    this.count++;
    this.score++;
  }
}

moveExplanation(from, to) {
  to.replaceWith(from);
}

You should post relative MINIMUM code in question. And you are giving link to your full app — Petr Averyanov, Oct 03 '19 at 15:42
I've updated my post. Please could you help me with this issue. Thank you. — integral100x, Oct 03 '19 at 15:49
I tried using the method below using ViewChild, but it's removing the div from the question but not the div from below the correct answer. — integral100x, Oct 03 '19 at 18:16
I don't know what you are trying to achieve, but don't access the DOM like that. Use angular bindings. For example `*ngIf` — AT82, Oct 03 '19 at 19:57
I removed *ngIf because I couldn't get the value using getElementById, kept getting null/undefined. Would like it if the correct option is selected to move the explanation into the question's spot. Currently the explanation moves there when any option is chosen. And once it replaces the question's spot, the div still remains underneath the correct answer, which I would like to remove. — integral100x, Oct 03 '19 at 20:47

score 0 · Answer 1 · answered Oct 03 '19 at 16:36

0

Decorate explanation div with #myElement tag to remove explanation.

add below code in .ts file

@viewChild('myElement')
private myElement:ElementRef;

moveExplanation(from, to) {
  to.replaceWith(from);
  this.myElement.nativeElement.innerHTML = '';
}

answered Oct 03 '19 at 16:36

Piyali Das

80
5

I tried this, but it's removing the div from the question but not the div from below the correct answer. – integral100x Oct 03 '19 at 16:50
Could it be that the explanation becomes "duplicated" so it finds the first explanation and clears it? – integral100x Oct 03 '19 at 18:04

score 0 · Answer 2 · answered Oct 04 '19 at 09:00

Just use ngIf when some condition is true/false, accessing and manipulating DOM should be the last resort.

I guess you want to do something like this with *ngIf (or use if else):

<div [hidden]="!isCorrect(option.optionValue)">
  <div id="explanation">
    <ng-container *ngIf="someCondition">
       <!-- Content here -->
    </ng-container>
    <ng-container *ngIf="!someCondition">
       <!-- Content here -->
    </ng-container>
  </div>
</div>

and then just toggle someCondition in your function:

someCondition = false;

radioChange(answer) {
  this.question.selectedOption = answer;
  this.answer.emit(answer);
  // instead of this, toggle condition
  // this.moveExplanation(this.itemFrom, this.itemTo);
  this.someCondition = true;

  if (this.option === this.question.answer && this.question.selectedOption === this.question.answer) {
    this.count++;
    this.score++;
  }
}

That is a bit of pseudocode, since I'm not really clear with what content you want to replace, but you get the point.

How do I use replaceWith to move explanation text in place of question and remove the original div?

2 Answers2