Answer Card Component

The answer card component includes two types: normal answer and quick quiz. Both types use the same event system, so you only need to instantiate one Answer Card SDK and pass the same instance to both components.

• Normal answer includes single choice, multiple choice, rating, and voting question types, and also supports timed answering.
• The quick quiz interface differs from normal answer and only includes single choice and multiple choice questions.

Before introducing and using this functional component, you need to perform common configuration for the interactive function receiver SDK. For details, see: Interactive Function Receiver UI Component - Configure SDK.

Normal Answer

Import

Online File Import Method

// 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 Method (Recommended)

 // 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';  

Usage

The answer card component handles most of the business logic internally based on the SDK. The integrator only needs to listen to the to-show and to-hide events to control the component's visibility. Additionally, the status-changed event is triggered when the answer data changes and contains the answer status. You can perform corresponding actions based on this status, such as modifying the modal box/prompt text.

Code Example

Taking PC integration as an example:

<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 Event Parameter Description

The to-show event includes an object-type event parameter with the following fields:

to-hide Event Parameter Description

The to-hide event includes an object-type event parameter with the following fields:

Methods

Quick Quiz

The integration logic is the same as normal answer. You can determine whether the question is single choice or multiple choice based on the parameters of the to-show and to-hide events.

Import

Online File Import Method

// 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 Method (Recommended)

// 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';  

Usage

Similarly, the PC quick quiz only provides content elements, so the integrator needs to set up the container element and control visibility.

Code Example

// 快速问答基础 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>

For the web mobile version, the display form is a horizontal long-strip answer card. Currently, the Polyv SaaS platform's live viewing page displays it above the mobile menu. The mobile component internally controls whether the quick quiz is displayed or not.

<!-- @file 快速问答移动端 -->
<template>
  <div>
    <quick-answer-card
      :answer-card-sdk="answerCardSdk"
    />
  </div>
</template>

<script>
import mixin from './mixin';

export default {
  mixins: [mixin],
};
</script>

Attributes

Events