1

I've "moved" my explanation div in the place of the question div using replaceWith, but when the correct answer is chosen, I would like the div below the correct answer containing the original explanation to be hidden so that the explanation is only displayed in the question's place (explanation div's inside mat-radio-group should not be shown).

Also when I advance to the next question, the explanation from the previous question is in the current question's spot where I would like the new question to be and similarly I would like the explanation to be hidden underneath the correct answer when it is chosen, resetting for each new question in the quiz if that makes sense. Please see my code below.

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <h3 class="identifyQuestion">Question #{{ question.questionId }} of {{ numberOfQuestions }}</h3>
  <ng-content></ng-content>

  <div class="form-group">
    <mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)" (click)="question.selectedOption = option">
      <div *ngFor="let option of question.options">
        <mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
                      [checked]="question.selectedOption == option"
                      [ngClass]="{'initial-state': initialState(),
                                  'is-correct': isCorrect(option.optionValue),
                                  'is-incorrect': isIncorrect(option.optionValue)}">
          {{ option.optionValue }}) {{ option.optionText }}

          <mat-icon *ngIf="isCorrect(option.optionValue)">done</mat-icon>
          <mat-icon *ngIf="isIncorrect(option.optionValue)">clear</mat-icon>
        </mat-radio-button>

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

itemFrom: HTMLElement;
itemTo: HTMLElement;

@ViewChild('explanation', {static: false})
private explanation: ElementRef;

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);
  // this.explanation.nativeElement.innerHTML = '';
}
integral100x
  • 332
  • 6
  • 20
  • 47
  • is this the only part of your functionality? – Pardeep Jain Sep 24 '19 at 15:32
  • when the question is correct the explanation should move in place of the question. i'm calling this function in another function. – integral100x Sep 24 '19 at 15:34
  • why don't you use https://material.angular.io/cdk/drag-drop/api – Pardeep Jain Sep 24 '19 at 15:35
  • didn't think of that, how to make it work? – integral100x Sep 24 '19 at 15:38
  • Hi, you should do: `$( ".explanation" ).first().replaceWith( $( ".question" ).first() );` – wajisan Sep 24 '19 at 15:39
  • you need to import module `import {DragDropModule} from '@angular/cdk/drag-drop';` after installing, rest you can check the steps in the link I had shared. – Pardeep Jain Sep 24 '19 at 15:39
  • 2
    @wajisan using JQuery with angular is never recommended approach – Pardeep Jain Sep 24 '19 at 15:40
  • not really dragging/dropping, just want the div to move in place of the other – integral100x Sep 24 '19 at 15:50
  • Use Renderer2, Angular's built in API for manipulating DOM elements. – João Ghignatti Sep 25 '19 at 03:35
  • I tried with jQuery replaceWith and that didn't seem to work. Any other way of doing this? – integral100x Sep 28 '19 at 15:38
  • I'm now trying with ViewChild and ViewContainerRef but it doesn't seem to work. – integral100x Sep 28 '19 at 20:06
  • 1
    You are not using jQuery. `old_element.replaceWith(new_element)` is a native JavaScript method. You are working with native DOM elements, not jQuery elements. – Jochem Kuijpers Sep 29 '19 at 01:23
  • Why isn't this working? – integral100x Sep 29 '19 at 18:04
  • getting error in console: Uncaught TypeError: to.replaceWith is not a function – integral100x Sep 29 '19 at 18:37
  • Please read the comments that have been given above. Several indicate you are not using jQuery. One provided alternative code that *does* use jQuery. Another pointed to using Material or Renderer2. You'll not get very far by just repeating that it doesn't work, when you don't really apply what is being said and stick with your current code. – trincot Sep 29 '19 at 18:59
  • Without more detail as to your specific problem, the answer to the question implicit in your question’s text should be answered by the linked duplicate, essentially, you have select a specific element or iterate through the collection of nodes. – David Thomas Sep 29 '19 at 19:33
  • I'm now using document.getElementById and switched the div's from class to id, but when I console.log the values I am getting null and an error message Error: Cannot read property 'replaceWith' of null – integral100x Sep 29 '19 at 20:06
  • The explanation div has an *ngIf on it, that's probably why it gets null. – integral100x Sep 29 '19 at 21:12
  • okay, I refactored the code by removing the ngif and setting it hidden and was able to replace the div with replaceWith, but the original explanation div underneath the correct answer is still there and not sure how to remove it. Also when I navigate to the next question the explanation from the previous question is in place of the current question. How do I fix this? – integral100x Oct 04 '19 at 00:19

0 Answers0