quizz/front/src/app/component/create/create.component.html

<!-- Titre -->
<div class="row">
  <div class="col s12 center">
    <h3>Create question</h3>
  </div>
</div>

<!-- Question -->
<div class="row">
  <!-- Text editor -->
  <div class="col s12 m6">
    <mz-textarea-container>
      <textarea mz-textarea
                id="question"
                class="white-text"
                label="Question"
                [(ngModel)]="question"
                (change)="markdown()"></textarea>
    </mz-textarea-container>
  </div>
  <!-- Preview -->
  <div class="col s12 m6" [innerHTML]="preview">
  </div>
</div>

<!-- Type de reponse -->
<div class="row">
  <div class="col s12 offset-m3 m6">
    <mz-select-container>
      <select mz-select
              id="answer_type"
              label="Answer type"
              placeholder="Select type"
              [(ngModel)]="type"
              (change)="changeType()">
        <option value="text">Text</option>
        <option value="qcm">Multiple-choice question</option>
        <option value="qcrm">Multiple choice question and answer</option>
      </select>
    </mz-select-container>
  </div>
</div>

<!-- Creation des reponses possibles -->
<div *ngIf="type && type !== 'text'">
  <div class="row">
    <div class="col s12 offset-m3 m6">
      <mz-input-container>
        <input mz-input
               label="Answer 1"
               type="text"
               [(ngModel)]="answers[0]">
      </mz-input-container>
      <mz-input-container>
        <input mz-input
               label="Answer 2"
               type="text"
               [(ngModel)]="answers[1]">
      </mz-input-container>
      <mz-input-container>
        <input mz-input
               label="Answer 3"
               type="text"
               [(ngModel)]="answers[2]">
      </mz-input-container>
      <mz-input-container>
        <input mz-input
               label="Answer 4"
               type="text"
               [(ngModel)]="answers[3]">
      </mz-input-container>
      <mz-input-container>
        <input mz-input
               label="Answer 5"
               type="text"
               [(ngModel)]="answers[4]">
      </mz-input-container>
      <mz-input-container>
        <input mz-input
               label="Answer 6"
               type="text"
               [(ngModel)]="answers[5]">
      </mz-input-container>
    </div>
  </div>
</div>

<!-- Valider -->
<div class="row">
  <div class="col s12 center">
    <button mz-button class="yellow accent-4 black-text" [disabled]="!isValid()" (click)="send()">
      <i mz-icon-mdi align="right" icon="send"></i>Send
    </button>
  </div>
</div>

<!-- Modal de chargement -->
<app-loader #loader></app-loader>