答题卡组件包含普通答题和快速问答两种类型的组件，两种组件采用同样的事件体系，所以仅需要实例化一个答题卡SDK，将同一个实例传给两种不同的答题组件使用。
普通答题有单选、多选、评分和投票这几种题型，并且还具有限时答题功能。
快速问答界面与普通答题不同，且仅包含单选和多选题目。
在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：互动功能接收端 UI 组件 - 配置 SDK。
普通答题
引入
在线文件引入方式
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcAnswerCard/PcAnswerCard.umd.min.js"></script>
// PC端
<script>
const AnswerCard = window.PolyvIRScene.PcAnswerCard.default;
</script>
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileAnswerCard/MobileAnswerCard.umd.min.js"></script>
// 移动端
<script>
const AnswerCard = window.PolyvIRScene.MobileAnswerCard.default;
</script>
import 方式引入（推荐）
// PC端
import AnswerCard from '@polyv/interactions-receive-sdk-ui-default/lib/PcAnswerCard/index';
// 移动端
import AnswerCard from '@polyv/interactions-receive-sdk-ui-default/lib/MobileAnswerCard/index';
使用方式
答题卡组件内部基于 SDK 处理了大部分业务逻辑，接入方仅需监听 to-show 和 to-hide 事件，去控制组件的可见性即可。另外，status-changed 事件会在答题数据发生变化时触发，并且含有答题状态，可根据该状态做相应处理，比如修改模态框/提示文字等。
代码示例
以 PC 端接入为例：
<template>
<div v-show="isShowAnswerCard">
<h2>{{ answerCardTitle }}</h2>
<answer-card
:answer-card-sdk="answerCardSdk"
@to-show="onSetAnswerCardVisible(true)"
@to-hide="onSetAnswerCardVisible(false)"
@status-changed="onStatusChanged"
/>
</div>
</template>
<script>
import { AnswerCard as AnswerCardSDK } from '@polyv/interactions-receive-sdk';
import AnswerCard from '@polyv/interactions-receive-sdk-ui-default/lib/PcAnswerCard/index';
export default {
components: {
AnswerCard,
},
data() {
return {
// 答题卡SDK实例
answerCardSdk,
// 是否显示答题卡
isShowAnswerCard: false,
// 外部弹窗（容器）标题
answerCardTitle: '',
};
},
created() {
this.answerCardSdk = new AnswerCardSDK();
},
beforeDestroy() {
this.answerCardSdk?.destroy();
},
methods: {
onSetAnswerCardVisible(visible) {
this.isShowAnswerCard = visible;
},
onStatusChanged(status) {
if (status === 'isShowResult' || status === 'isShowAnswer') {
this.answerCardTitle = this.answerCardSdk.curSubmittedAnswer ? '答题结果' : '未作答';
} else {
this.answerCardTitle = '答题卡';
}
},
},
};
</script>
Attributes
Events
| 事件名 | 参数类型 | 参数含义 | 说明 |
|---|
| | | |
| | | |
| string: 'isShowQuestion', 'isShowResult', 'isShowAnswer' | | 答题卡内部展示状态发生变化时触发。isShowQuestion：正在显示题目，PC和移动端组件共有状态；isShowResult：正在显示答题结果；PC和移动端组件共有状态；isShowAnswer：正在显示答案，移动端组件特有状态。可根据此状态，执行修改弹窗标题等操作。见demo示范。 |
to-show 事件参数说明
to-show 事件包含一个对象类型的事件参数，该对象具体字段如下。
| 属性名 | 类型 | 含义 |
|---|
| | |
| string: 'C', 'R', 'S', 'V' | 题目类型, C：多选题, R：单选题, S：评分题, V：投票题 |
| | |
| | |
| | |
| | |
| | |
to-hide 事件参数说明
to-hide 事件包含一个对象类型的事件参数，该对象具体字段如下。
Methods
| 方法名 | 参数 | 说明 |
|---|
| | 将答题卡组件内部状态切换成"isShowResult" （查看结果） 状态，仅适用于移动端组件 |
快速问答
接入逻辑同普通答题。可基于 to-show 和 to-hide 事件的参数判断题目为单选/多选。
引入
在线文件引入方式
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcQuickAnswer/PcQuickAnswer.umd.min.js"></script>
// PC端
const QuickAnswerCard = window.PolyvIRScene.PcQuickAnswer.default;
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileQuickAnswer/MobileQuickAnswer.umd.min.js"></script>
// 移动端
const QuickAnswerCard = window.PolyvIRScene.MobileQuickAnswer.default;
import 方式引入（推荐）
// PC 端
import QuickAnswerCard from '@polyv/interactions-receive-sdk-ui-default/lib/PcQuickAnswer/index';
// 移动端
import QuickAnswerCard from '@polyv/interactions-receive-sdk-ui-default/lib/MobileQuickAnswer/index';
使用方式
同样地，PC端快速问答仅提供内容元素，所以需要接入方设置容器元素和控制可见性。
代码示例
// 快速问答基础 mixin
import { AnswerCard as AnswerCardSDK } from '@polyv/interactions-receive-sdk';
export default {
data() {
return {
// 答题卡SDK实例
answerCardSdk,
// 是否显示答题卡
isShowAnswerCard: false,
};
},
created() {
this.answerCardSdk = new AnswerCardSDK();
},
beforeDestroy() {
this.answerCardSdk?.destroy();
},
methods: {
onSetQuickAnswerCardVisible(visible, question) {
this.isShowAnswerCard = visible;
},
},
};
<!-- @file 快速问答 PC 端 -->
<template>
<div v-show="isShowAnswerCard">
<quick-answer-card
:answer-card-sdk="answerCardSdk"
@to-show="(question) => onSetQuickAnswerCardVisible(true, question)"
@to-hide="(question) => onSetQuickAnswerCardVisible(false, question)"
/>
</div>
</template>
<script>
import mixin from './mixin';
export default {
mixins: [mixin],
};
</script>
而web移动端展示形式为横向长条形的答题卡，目前Polyv SaaS 平台直播观看页会将其展示在移动端菜单之上。移动端组件内部会控制快速问答的显示与否。
<!-- @file 快速问答移动端 -->
<template>
<div>
<quick-answer-card
:answer-card-sdk="answerCardSdk"
/>
</div>
</template>
<script>
import mixin from './mixin';
export default {
mixins: [mixin],
};
</script>
Attributes
Events
