答題卡元件

答題卡元件包含普通答題和快速問答兩種型別的元件，兩種元件採用同樣的事件體系，所以僅需要實例化一個答題卡 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