如何使用SurveyJs创建在线测验或评估测试并在其上添加评分和时间(第2部分)
#javascript #form #scoring #surveys

SurveyJS图书馆及其在教育中的好处。

Add scoring to a survey, quiz, or test - SurveyJS

调查创建者保存一天

在JSON中编写几十条线以配置3个问题地理测验并不重要。但是,如果这是一项多页评估测试或其中几个测试该怎么办?然后,手动编码根本不是一个选项,尤其是在没有涉及开发人员的情况下创建此类复杂测试(!)的其他方法。

我们正在谈论Survey Creator,这是一种可嵌入的GUI形式构建器,可让您拥有一种自托管工具来创建,存储和分析任何教育评估材料。无论是课堂结束时还是中期考试的流行测验 -

自动生成JSON中的形式模型

为了展示调查创建者的功能,让我们介绍其free full scale demo。从左侧的工具箱中删除一个单选按钮组问题,以创建一个表单。

Free Survey Tool UI - SurveyJS | Adding a radio button group question

然后,将标题,描述和分配值添加到第一个问题(有多少大洲?有四个选择选项:4、6、5和7)将此表格变成我们的样本地理测试。右侧的折叠选项卡组成了属性网格,用户可以在其中更改问题panel和Form设置。

这次我们不会关注调查创建者界面的基本功能。有关详细信息,请参考dedicated end-user guide for Survey Creator

The Property grid of the Survey Creator UI — SurveyJS

为A问题设置正确的答案

属性网格的默认功能使您可以为问题设置正确的答案。为此,请切换到问题设置级别,单击数据下的“正确答案”按钮,然后在正确的答案弹出中选择正确的答案,然后单击“应用”。

How to set the correct answer for a question — SurveyJS

让我们在测试中添加更多问题,然后继续设置时间安排。由于我们可以包含SurveyJS表单库支持的任何问题类型,因此让S在同一页面上添加一个下拉菜单,另一个单选按钮组为第二个页面。

Add a Single Selection Dropdown menu to a test — SurveyJS

调查创建者UI的设置时间限制

要指定时间限制,请选择“调查级”设置,然后在属性网格的计时器/测验部分下,输入您要允许的每个页面的秒数和/或以完成整个调查。您还可以配置时间可见度和位置,以确保学生可以自节奏回答所有问题。

How to time a test in Survey Creator UI — SurveyJS

调查完成了部分

像大多数其他表单设置一样,定制反馈页面也可以在调查创建者的图形接口中配置。如果您只想通过将选择与预定义的正确答案进行比较来计算分数,则在调查级别设置中,选择“调查”部分,并在调查中输入规则,使用标记标签完成标记。

Configure a custom test result page — SurveyJS

为了根据学生提供的正确答案的数量显示个性化的反馈,在属性网格的同一部分添加了动态调查完整页面标记,并指定了触发它的表达式,如下所示:

Create a dynamic test result page — SurveyJS

什么是得分?

评分是评估或分配数值或分数为测试,考试,测验或其他评估表的特定问题的过程,或者向此类问题的单选项选项评估或分配数值或分数。它涉及应用规则或标准来评估问题或要评分的问题的质量,数量或绩效水平。

得分有各种应用领域,包括学术或专业环境,体育,游戏或比赛。例如,在教育中,评分用于评估特定学科或课程中学生的知识,技能或能力。分数可用于比较学生的表现,确定成绩或排名,或提供改进的反馈。在银行业,评分可以根据他们的答案来帮助评估贷款申请人,并分解值得信赖的申请人。

如何为SurveyJS表格添加评分

1.1默认情况下,属性网格不包含score属性。
add a custom property to the Property Grid,我们需要在Survey.Serializer对象上调用addProperty(questionType, propertySettings)方法。将自定义score属性添加到问题和选择选项中的唯一区别是您添加的类。由于在scored quiz中只有一个答案是正确的,因此将得分属性添加到Question类中。相反,在scored survey中没有正确的答案,因此需要将自定义的score属性添加到ItemValue类中。比较以下代码:

  • 将自定义score属性添加到问题:
import { Serializer } from “survey-core”;

Serializer.addProperty("question", {
   name: "score:number"
});
  • 将自定义score属性添加到选择选项:
import { Serializer } from “survey-core”;

Serializer.addProperty("itemvalue", {
   name: "score:number"
});

1.2现在,当分数属性被序列化并包含在调查JSON模式中时,您需要为每个问题分配其值,就像我们早些时候指定correctAnswer属性的方式相同。这是我们的样本测试的第一个问题,都如何配置两个属性:

{
  "type": "radiogroup",
  "name": "count_continents",
  "score": 5,
  "title": "How many continents are there?",
  "correctAnswer": "Item 7",
  "choices": [
    "4",
    "6",
    "5",
    "7"
  ],
  "colCount": 2
}

计算总分

1.3要总结总分,您需要处理onComplete事件,并使用问题的isAnswerCorrect方法使用以下calculateTotalScore助手功能,该方法检查问题是否正确回答。


function calculateTotalScore (data) {
  var totalScore = 0;
  Object.keys(data).forEach((qName) => {
    const question = survey.getQuestionByValueName(qName);
    if (question.isAnswerCorrect()) {
      if (!!question.score) {
        totalScore += question.score;
      }
    }
  });
  return totalScore;
}

请参阅此free demo showing how to configure a scored quiz,以了解如何使用calculateMaxScore辅助功能计算最大分数。

1.4最后,一旦计算了总分数,我们需要通过在触发自定义标记的表达式属性中使用不同的占位符来修改completedHtmlOnCondition数组。由于我们不算正确或不正确的答案,但是分配给每个正确答案的点,所以参数更改为{totalScore}{maxScore}等。这是一个示例:

const surveyJson = {
  ...
  completedHtmlOnCondition: [{
    expression: "{totalScore} > 10",
    html: "<h4>Congratulations! You got {totalScore} points and passed the test. Well done!</h4>"
  }]
};

基本地理测试演示

现在,您可以看到我们使用调查创建者在行动中构建的基本地理测试。单击“打开沙盒”以进行免费演示:

结论

SurveyJS为在线测试和测验提供了广泛的内置功能,包括时间安排,评分,自定义反馈或start page等。您可以在JSON中手动编写表单模型(请咨询Form Library API references),在您的应用中免费运行它,而store the results in your own database

但是,如果您处理的评估表格的复杂性和数量很重要,则可能需要利用调查创建者的拖放UI(一种自托管的形式构建器工具),该工具与free full scale demo一起运送。添加到应用程序中后,调查创建者会自动为您生成一个表单模型,而最终用户在无代码UI中配置了表单的内容和布局。然后,生成的表单以相同的JSON格式从数据库中存储并加载,并在您的应用中呈现。

Creator UI是完全可自定义的,您可以根据最终用户的需求对其进行定制,以使其更加愉快和易于使用。 Addremove或属性网格中调查元素的hide properties,修改默认选项卡的可见性或添加您的自定义选项卡或按钮。

通过SurveyJS,创建,修改和运行评分测试和调查从未更容易。立即使用您的第一个调查JS评估表选择您首选的前端技术和get started