Questionnaire Component

This component is the questionnaire component for the interactive feature receiver. It enables the display, filling, submission, and result display of questionnaire questions on the audience side.

Before introducing and using this functional component, you need to perform public configuration for the interactive feature receiver SDK. For details, please refer to: Interactive Feature Receiver UI Components - SDK Configuration.

Import

Online File Import Method

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcQuestionnarie/PcQuestionnarie.umd.min.js"></script>
// PC 端
<script>
    const Questionnaire = window.PolyvIRScene.PcQuestionnarie.default;
</script>

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileQuestionnarie/MobileQuestionnarie.umd.min.js"></script>
// 移动端
<script>
    const Questionnaire = window.PolyvIRScene.MobileQuestionnarie.default;
</script>

Import Method (Recommended)

// PC 端
import Questionnaire from '@polyv/interactions-receive-sdk-ui-default/lib/PcQuestionnarie';

// 移动端
import Questionnaire from '@polyv/interactions-receive-sdk-ui-default/lib/MobileQuestionnarie';

Code Example

Taking mobile integration as an example:

<template>
  <!-- modal是一个弹窗组件，可根据界面风格自行设计 -->
  <modal
      :backable="hasBackBtn"
      :title="questionnaireTitle"
      :visible="isShowQuestionnaire"
      @back="onModalReturn"
      @close="onSetQuestionnaireVisible(false)"
  >
    <!-- 问卷组件主体 -->
    <questionnaire
      ref="questionnaire"
      :visible="isShowQuestionnaire"
      :questionnaire-sdk="questionnaireSdk"
      @status-changed="onStatusChanged"
      @to-show="onSetQuestionnaireVisible(true)"
      @to-hide="onSetQuestionnaireVisible(false)"
      @has-questionnaire="hasQuestionnaire"
    />
  </modal>
</template>

<script>
import { Questionnaire as QuestionnaireSDK } from '@polyv/interactions-receive-sdk';
import Questionnaire from '@polyv/interactions-receive-sdk-ui-default/lib/MobileQuestionnarie';

const AllStatus = {
  // 展示
  isShowQuestion: 'isShowQuestion',
  isShowResult: 'isShowResult',
  isShowAnswer: 'isShowAnswer',
  isShowQuestionnaireList: 'isShowQuestionnaireList'
};
export default {
  components: {
    Questionnaire,
  },

  data() {
    return {
      // 问卷SDK实例
      questionnaireSdk,
      // 是否显示问卷
      isShowQuestionnaire: false,
      // 是否显示后退键
      hasBackBtn: false,
      // 问卷状态，显示对应弹窗标题
      currentStatus: AllStatus.isShowQuestion
    };
  },
  computed: {
    questionnaireTitle() {
      const { currentStatus } = this;
      let title = '';
      this.hasBackBtn = false;
      if (currentStatus === AllStatus.isShowQuestion) {
        this.hasBackBtn = true;
        title = '问卷';
      } else if (currentStatus === AllStatus.isShowResult) {
        title = '问卷结果';
      } else if (currentStatus === AllStatus.isShowAnswer) {
        title = '问卷结果';
      } else if (currentStatus === AllStatus.isShowQuestionnaireList) {
        title = '问卷列表';
      }
      return title;
    }
  },

  created() {
    this.questionnaireSdk = new QuestionnaireSDK();
  },

  beforeDestroy() {
    this.questionnaireSdk?.destroy();
  },

  methods: {
    showList() {
      this.$refs.questionnaire.showList();
      this.onSetQuestionnaireVisible(true);
    },
    // 弹窗后退键，回到问卷列表
    onModalReturn() {
      this.showList();
    },
    onSetQuestionnaireVisible(visible) {
      this.isShowQuestionnaire = visible;
    },
  },
};
</script>

Attributes

Events