答题卡组件

答题卡组件包含普通答题和快速问答两种类型的组件，两种组件采用同样的事件体系，所以仅需要实例化一个答题卡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

to-show 事件参数说明

to-show 事件包含一个对象类型的事件参数，该对象具体字段如下。

to-hide 事件参数说明

to-hide 事件包含一个对象类型的事件参数，该对象具体字段如下。

Methods

快速问答

接入逻辑同普通答题。可基于 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