问卷组件
本组件为互动功能接收端的问卷组件,可实现问卷题目在观众端的展示、填写提交以及问卷结果的展示。
在引入及使用本功能组件前,需要先对互动功能接收端SDK进行公共配置,详情请查看:互动功能接收端 UI 组件 - 配置 SDK。
引入
在线文件引入方式
// 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 方式引入(推荐)
// PC 端
import Questionnaire from '@polyv/interactions-receive-sdk-ui-default/lib/PcQuestionnarie';
// 移动端
import Questionnaire from '@polyv/interactions-receive-sdk-ui-default/lib/MobileQuestionnarie';
代码示例
以 移动端 接入为例:
<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
是否有需要答题的问卷
Last updated
Was this helpful?