form.component.html 10.3 KB
<div class="model-content">


  <app-formula-input style="position: absolute;right:0;" [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br>
  <app-formula-input [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br>
  <div style="padding: 20px;">


    <div style="width: 400px; display: flex; justify-content: center; margin-bottom: 50px;">

      <h2 style="width: 60px;">标题:</h2>
      <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" style="margin-left: 15px">

    </div>


    <h2>热区配置:</h2>
    <app-custom-hot-zone
      [bgItem]="item.bgItem"
      [hotZoneItemArr]="item.hotZoneItemArr"
      [customTypeGroupArr]="customTypeGroupArr"
      (save)="saveHotZone(item, $event)"
      >

    </app-custom-hot-zone>


    <div>
      <nz-radio-group [(ngModel)]="item.ques_type" style="margin-top: 50px" (ngModelChange)="save()">
        <h2 nz-radio nzValue="single_choice">选择题</h2>
        <h2 nz-radio nzValue="short_answer">简答题</h2>
      </nz-radio-group>
    </div>

    <!-- 选择题 -->

    <div *ngIf="item.ques_type == 'single_choice'">

      <div style="margin-top: 30px; display: flex; width: 1000px;">
        <div style="width: 300px; margin-top: 10px; margin-right: 15px;">
          <span style="margin-right: 5px;">问题:</span>

          <app-upload-image-with-preview
            [picUrl]="item.ques_pic_url"
            (imageUploaded)="onImageUploadSuccess($event, 'ques_pic_url')">
          </app-upload-image-with-preview>
        </div>

        <div style="width: 300px;">

          <div style="display: flex; align-items: center; height: 30px;">
            <span style="margin-right: 5px; margin-left: 15px;">小标题:</span>

            <app-audio-recorder
              [audioUrl]="item.title_audio_url"
              (audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url')"
            ></app-audio-recorder>
          </div>

          <app-upload-image-with-preview
            [picUrl]="item.title_pic_url"
            (imageUploaded)="onImageUploadSuccess($event, 'title_pic_url')">
          </app-upload-image-with-preview>
        </div>

      </div>


      <div *ngFor="let op of item.optionArr" style="border: 1px solid #ccc; margin: 10px; padding: 10px; border-radius: 5px;">
        <div style="margin-top: 20px; display: flex; align-items: center; width: 500px;">
          <span style="margin-right: 5px;">{{op.id}}:</span>
          <div style="width: 300px;">
            <app-upload-image-with-preview
              [picUrl]="op.pic_url"
              (imageUploaded)="onImageUploadSuccess($event, 'pic_url', op)">
            </app-upload-image-with-preview>
          </div>
          <div style="margin-left: 20px;">
            <span> 正确: </span>
            <nz-switch [(ngModel)]="op.is_right" (ngModelChange)="save()"></nz-switch>
          </div>

        </div>

        <nz-divider style="margin-top: 20px;"></nz-divider>


        <div *ngIf="!op.is_right" style="padding: 20px; display: flex; align-items: center;">


          <div style="width: 300px;">
            纠错视频:
            <app-upload-video
              (videoUploaded)="onVideoUploadSuccess($event, op)"
              [item]="op"
              [videoUrl]="op.video_url">
            </app-upload-video>
          </div>

          <div style="margin-left: 20px;">

            <div style="display: flex; align-items: center;">
              <span style="margin-right: 5px;">小标题2:</span>
              <app-audio-recorder
                [audioUrl]="op.title_audio_url"
                (audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url', op)"
              ></app-audio-recorder>
            </div>
            <div style="width: 300px;">
              <app-upload-image-with-preview
                [picUrl]="op.title_pic_url"
                (imageUploaded)="onImageUploadSuccess($event, 'title_pic_url', op)">
              </app-upload-image-with-preview>
            </div>

            <span style="margin-left: 15px;" >问题2:</span>
            <div style="width: 300px;">
              <app-upload-image-with-preview
                [picUrl]="op.ques_pic_url"
                (imageUploaded)="onImageUploadSuccess($event, 'ques_pic_url', op)">
              </app-upload-image-with-preview>
            </div>

          </div>

          <div style="margin-left: 20px;">

            <div *ngFor="let op2 of op.optionArr" style="display: flex; align-items: center; margin-top: 5px;">
              {{op2.id}}
              <div style="width: 150px; margin-left: 5px;">
                <app-upload-image-with-preview
                  [picUrl]="op2.pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, 'pic_url', op2)">
                </app-upload-image-with-preview>
              </div>

              <div style="margin-left: 5px;">
                <span> 正确: </span>
                <nz-switch [(ngModel)]="op2.is_right" (ngModelChange)="save()"></nz-switch>
              </div>
            </div>

          </div>

        </div>
      </div>

    </div>



    <!-- 简答题 -->

    <div *ngIf="item.ques_type == 'short_answer'">


      <div style="margin-top: 30px; display: flex; width: 1000px;">
        <div style="width: 300px; margin-top: 10px; margin-right: 15px;">
          <span style="margin-right: 5px;">选择题问题:</span>

          <app-upload-image-with-preview
            [picUrl]="item.choice_obj.ques_pic_url"
            (imageUploaded)="onImageUploadSuccess($event, 'ques_pic_url', item.choice_obj)">
          </app-upload-image-with-preview>
        </div>

        <div style="width: 300px;">

          <div style="display: flex; align-items: center; height: 30px;">
            <span style="margin-right: 5px; margin-left: 15px;">选择小标题:</span>

            <app-audio-recorder
              [audioUrl]="item.choice_obj.title_audio_url"
              (audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url', item.choice_obj)"
            ></app-audio-recorder>
          </div>

          <app-upload-image-with-preview
            [picUrl]="item.choice_obj.title_pic_url"
            (imageUploaded)="onImageUploadSuccess($event, 'title_pic_url', item.choice_obj)">
          </app-upload-image-with-preview>
        </div>

      </div>


      <div *ngFor="let op of item.choice_obj.optionArr" style="border: 1px solid #ccc; margin: 10px; padding: 10px; border-radius: 5px;">
        <div style="margin-top: 20px; display: flex; align-items: center; width: 500px;">
          <span style="margin-right: 5px;">{{op.id}}:</span>
          <div style="width: 300px;">
            <app-upload-image-with-preview
              [picUrl]="op.pic_url"
              (imageUploaded)="onImageUploadSuccess($event, 'pic_url', op)">
            </app-upload-image-with-preview>
          </div>
          <div style="margin-left: 20px;">
            <span> 正确: </span>
            <nz-switch [(ngModel)]="op.is_right" (ngModelChange)="save()"></nz-switch>
          </div>

        </div>

        <nz-divider style="margin-top: 20px;"></nz-divider>



      </div>

      <nz-divider style="margin-top: 50px;"></nz-divider>

      <div style="display: flex; align-items: center; margin-bottom: 50px;">

        <div style="width: 400px; margin-top: 10px; margin-right: 15px;">
          <span style="margin-right: 5px;">新简答问题:</span>

          <app-upload-image-with-preview
            [picUrl]="item.answer_obj.ques_pic_url"
            (imageUploaded)="onImageUploadSuccess($event, 'ques_pic_url', item.answer_obj)">
          </app-upload-image-with-preview>
        </div>

        <div style="width: 400px;">

          <div style="display: flex; align-items: center; height: 30px;">
            <span style="margin-right: 5px; margin-left: 15px;">新简答小标题:</span>

            <app-audio-recorder
              [audioUrl]="item.answer_obj.title_audio_url"
              (audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url', item.answer_obj)"
            ></app-audio-recorder>
          </div>

          <app-upload-image-with-preview
            [picUrl]="item.answer_obj.title_pic_url"
            (imageUploaded)="onImageUploadSuccess($event, 'title_pic_url', item.answer_obj)">
          </app-upload-image-with-preview>
        </div>

        <div style="width: 400px; margin-left: 15px;">
          <span style="margin-right: 5px; ">新简答题 答案:</span>
          <div style="width: 200px; display: flex; justify-content: center; align-items: center;">
            <!-- <input type="text" nz-input [(ngModel)]="item.new_answer" (blur)="save()" style="margin-top: 5px"> -->
            <app-formula-input style="margin-top: 5px" [(ngfModel)]="item.new_answer" (ngfBlur)="save()"></app-formula-input>
          
          </div>
        </div>

      </div>


    </div>



<!--
    <div style="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center">
      <h2>气泡文本</h2>
      <div style="width: 80%; display: flex; justify-content: center; align-items: center;">
        <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" style="margin-top: 5px">

      </div>

    </div>

    <app-custom-hot-zone
    [bgItem]="item.bgItem"
    [hotZoneItemArr]="item.hotZoneItemArr"
    [customTypeGroupArr]="customTypeGroupArr"
    (save)="saveHotZone(item, $event)"
    >

    </app-custom-hot-zone> -->
    <!-- <div style="width: 300px;" align='center'>
      <span>图1: </span>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url"
        (imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
      </app-upload-image-with-preview>
    </div>

    <div style="width: 300px; margin-top: 5px;" align='center'>
      <span>图2: </span>
      <app-upload-image-with-preview
        [picUrl]="item.pic_url_2"
        (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')">
      </app-upload-image-with-preview>
    </div>

    <div style="width: 300px; margin-top: 15px;">
      <span>文本: </span>
      <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
    </div>

    <div style="margin-top: 5px">
      <span>音频: </span>
      <app-audio-recorder
        [audioUrl]="item.audio_url"
        (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
      ></app-audio-recorder>
    </div> -->

  </div>

</div>