> For the complete documentation index, see [llms.txt](https://polyv.gitbook.io/document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://polyv.gitbook.io/document/docs/live/js/new-sdk/interactions-receive-sdk/ui/default/questionnaire.md).

# 问卷组件

本组件为互动功能接收端的问卷组件，可实现问卷题目在观众端的展示、填写提交以及问卷结果的展示。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：[互动功能接收端 UI 组件 - 配置 SDK](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/interactions_receive_sdk/ui/default/overview/README.md#配置-sdk)。

## 引入

#### 在线文件引入方式

```html
// 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>
```

```html
// 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 方式引入（推荐）

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

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

## 代码示例

以 移动端 接入为例：

```vue
<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

| 属性名              | 类型                    | 默认值               | 含义             |
| ---------------- | --------------------- | ----------------- | -------------- |
| lang             | string：'zh\_CN', 'en' | `'zh_CN'`         | 语言             |
| questionnaireSdk | Object                | null              | 问卷 SDK 实例      |
| delayTime        | number                | 移动端 8000，PC端 2000 | 延迟触发显示时间，单位毫秒  |
| visible          | boolean               | false             | 判断问卷隐藏时，重置内部状态 |

## Events

| 事件名               | 参数类型                                                     | 参数含义       | 说明                                                                                               |
| ----------------- | -------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------ |
| status-changed    | string: 'isShowQuestion', 'isShowResult', 'isShowAnswer' | 问卷内部的弹窗状态  | 问卷状态改变时会触发，可用于根据状态展示不同UI，如定制弹窗标题。isShowQuestion：显示问卷题目；isShowResult：显示问卷结果；isShowAnswer：同显示问卷结果。 |
| to-show           | 无参数                                                      | -          | 讲师发布问卷或收到问卷结果后触发，表示此时需要展示问卷弹窗                                                                    |
| to-hide           | 无参数                                                      | -          | 讲师终止问卷或观众提交问卷后触发，表示此时需要隐藏问卷弹窗                                                                    |
| success-submit    | 无参数                                                      | -          | 提交问卷成功后回调                                                                                        |
| has-questionnaire | boolean                                                  | 是否有需要答题的问卷 |                                                                                                  |