在HTML页面中打印结果,无需表达故事情节的GUI

了解如何在HTML页面中打印多个测试的结果而不使用铰接故事情节GUI。

在HTML页面中打印结果,无需表达故事情节的GUI

最近,我们满足了一位客户的一个有趣的要求。客户想开发一个有3个模块的课程。学习者需要在每个模块的最后回答一个小测验。客户端希望显示每个模块的分数以及3个分数的平均值。我们可以使用变量和触发器轻松地满足这个要求。但是,客户想要在一个单独的窗口中显示它们,在清晰的故事情节环境“外部”(没有工具的GUI)并打印它们。

为了满足这个要求,我们必须调用外部HTML页面。首先,我们需要将所有变量发送到HTML页面,并在一个单独的窗口中打开它。

此后,我们需要遵循下面给出的步骤。

第1步:

每个测试的问题和结果页面创建三个测试。

在下面的例子中,我创建了三个小测验,每个小测验有5个问题和一个结果页面。

第1步

当插入结果页时,将生成默认的结果变量。”(%的结果。ScorePercent % %, %的结果。ScorePoints %点)”is the user’s score,

“(%结果.passpercent %%,%结果.PassPoints%点)”is the passing score.

生成了默认的结果变量

这里我们有三个测试和三个结果页。变量应该是这样的。

第一个测试:

”(%的结果。ScorePercent % %, %的结果。ScorePoints %点)”

“(%结果.passpercent %%,%结果.PassPoints%点)”

第二个测试:

“(%结果1.scorepercent %%,%结果1.ScorePoints%点)”

”(%其中回答。PassPercent % %, %其中回答。PassPoints %点)”

第三个测试:

”(% Results2。ScorePercent%%, %Results2.ScorePoints% points)”

”(% Results2。PassPercent % %, % Results2。PassPoints %点)”

第2步:

现在,创建四个数值变量(per1、per2、per3和avg),默认值为0。

第2步

步骤3:

插入文本输入字段(用户可以输入他的的名字),并在该幻灯片中添加打印按钮。

第3步

当我们插入一个文本输入字段时,默认情况下,一个文本变量被调用“TextEntry”被建造。

步骤4:

按照相同的顺序向该幻灯片添加以下触发器。

Trigger1:

分配“结果。ScorePercent”到“per1当幻灯片时间线开始时。

Trigger2:

分配“其中回答。ScorePercent”到“per2当幻灯片时间线开始时。

Trigger3:

分配“Results2。ScorePercent”到“per3当幻灯片时间线开始时。

Trigger4:

添加值“per1”到“avg当幻灯片时间线开始时。

Trigger5:

添加值“per2”到“avg当幻灯片时间线开始时。

Trigger6:

添加值“per3”到“avg当幻灯片时间线开始时。

Trigger7:

除以“avg3.(测试次数)幻灯片时间线开始时。

触发器7.

步骤5:

现在,当用户点击“打印”按钮。

步骤5

步骤6:

在JavaScript中写下以下代码。

var newWin = window.open(“result.html”、“状态= 0,滚动条= 0”);

在这里,”结果.html.“是一个外部页面。我们可以发送结果变量(Per1, per2, per3 &平均)和姓名(TextEntry)进入此页面。

步骤6

第七步:

现在,打开记事本并在其中添加以下代码。

<!doctype html>

<!- [if lt IE 7]> <!- [if IE 7]> <!- [if IE 8]>

<!- [if IE 9]> <!- [if (gt IE 9)|!(IE)]>

结果<标题> < /名称>

<时尚>

div {边缘:0px;填充:0px;}

# res_text {

文字对齐:左;

位置:绝对;

左:100 px;

上图:50 px;

Z-指数:2;

宽度:460 px;

颜色:#000000;

# res_percent {

文字对齐:左;

位置:绝对;

左:100 px;

前:100像素;

Z-指数:2;

宽度:550 px;

颜色:#000000;

字体大小:12pt;

字体家族:“Myriada Pro”,“Lucida Grande”,“Lucida Sans Unicode”,Arial,Sans-Serif;

> < /头

<身体onload = " window.print (); " >