# 问卷组件

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

在引入及使用本功能组件前，需要先对互动功能接收端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#%E9%85%8D%E7%BD%AE-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                                                  | 是否有需要答题的问卷 |                                                                                                  |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://polyv.gitbook.io/document/docs/live/js/new-sdk/interactions-receive-sdk/ui/default/questionnaire.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.