如何在完全观看视频之前禁用调查？答案

【问题标题】：How do I disable a Survey until video is completely watched first?如何在完全观看视频之前禁用调查？
【发布时间】：2014-02-14 17:49:35
【问题描述】：

我们一直在努力想办法解决这个问题。

我们知道我们认为合适的解决方案。我们只是不知道该怎么做。

我们希望用户观看六个视频。

每个视频都附有一项调查。

每个调查可以有一个或多个问题。

以下是视频和调查组织方式的屏幕截图：

然后这里是生成视频和调查所附屏幕截图的代码。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="videoTraining.aspx.vb" Inherits="videoTraining" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Training Videos</title>
<meta name="DownloadOptions" content="noopen" />

 <script type="text/javascript">
    function openWindow(path)
   {
     window.open(path, '', 'width=780,height=680,toolbar=no,location=no,directories=no,statu s=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes');
   }
    </script>

</head>
<body>
<form id="form1" runat="server">
  <asp:Label ID="lblMessage" class="blink" runat="server" BorderStyle="None" Font-Bold="True" Font-Names="Garamond"
                    Font-Size="x-Large" Style="z-index: 100; color: #ff0000;left:620px; position: absolute; top: 112px"
                    Width="493px"></asp:Label>
<div id='outer-wrapper'>
  <div id='wrap2'>
   <div>
    <br />
      <table>    
       <tr>
        <td class="style2"><img id="Img1" src="~/App_Themes/Silver/images/line.gif" alt="" runat="server" /></td>
       </tr>
       <tr>
        <td style="white-space:nowrap" class="style2">
         <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource2">
          <ItemTemplate>
           <ul>
            <li>
             <asp:HyperLink  ID="HyperLink1" runat="server" Font-Bold="true" ForeColor="#254117" NavigateUrl='<%# Eval("url", "javascript:openWindow(&#039;{0}&#039;);") %>' Text='<%# Eval("title") %>' /><br />
             <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="#dc381f" CssClass="generaltext" Text='<%# Eval("Description") %>'></asp:Label>&nbsp;<br />
             <asp:HyperLink ID="HyperLink2" runat="server" Font-Bold="true" ForeColor="#614051" NavigateUrl='<%# "start.aspx?testid=" & Eval("SurveyId") %>' Text='Take a quiz'></asp:HyperLink>
            </li>
          </ul>
         </ItemTemplate>
        </asp:DataList>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnString %>"
        ProviderName="<%$ ConnectionStrings:ConnString.ProviderName %>"
        SelectCommand="SELECT [url], [Title], [Description], [SurveyId] FROM [Survey]"></asp:SqlDataSource>
       </tr>                                         
      </table> 
     </div>
    </div>
   </div>
  </form>
 </body>
</html>

这可以正常工作。

这是我们遇到问题的地方。

用户通常会采取捷径，要么猜测与视频相关的问题，要么随机观看视频。

因此，他们会一直猜测问题直到通过，但在实践中，无法充分理解视频中的说明。

这给公司带来了很大的问题。

因此，我的任务是确保在可能的情况下发生以下情况。

1，在用户点击并观看视频之前禁用测验。 2、避免用户跳过一个视频跳到另一个视频。

例如，用户不应跳过视频 1 来观看视频 2。

因此，基本上，启用视频 1 并禁用其他所有内容，直到用户观看视频为止。

然后为该视频启用测验。

继续此操作，直到观看完所有视频。

有什么想法可以解决这个问题吗？

看起来 JavaScript 或 JQuery 是可行的方法，但我不知道如何去做。

提前非常感谢

【问题讨论】：

标签： javascript jquery asp.net ajax vb.net

【解决方案1】：

尝试将您的项目 ID 添加到匹配控件的 ID，即

<a id='videoLink_<%# Eval("ID") %>' href='videoLink" class="disabled">
<a id='surveyLink_<%# Eval("ID") %>' href='surveyLink" class="disabled">

...

然后在 document.ready() 中使用 jquery select 仅启用第一个视频：

//enable first video
$("[id^='videoLink_']:first").removeClass("disabled");

不确定您将如何处理视频观看事件，但在另一个 JS 函数中：

function videoWatched(videoLinkID){
  //get item id from the watched video:
  var itemID = videoLinkID.split("videoLink_")[1];
  //enable the matching survey link:
  $("#surveyLink_" + itemID).removeClass("disabled");
}

还有一些 CSS：

.disabled:hover{
cursor:not-allowed;
}

【讨论】：

感谢您的回复。我对此感到非常沮丧。我现在正在尝试您的建议。我会发布更新。请注意。再次感谢。
嗨@artm，再次感谢。我发布了我用来在我发布的屏幕截图上生成链接的代码。无论如何，您可以帮助使用该代码并与您的代码集成吗？我对如何让你的代码和我的代码工作感到有点困惑。
肯尼，用我的示例中的链接替换你在代码中的 asp:hyperlinks 并添加我发送的 JS 代码。这个想法是，当您在链接的 ID 中使用当前项目的 ID 时，当观看视频时，您可以找到要启用的 a。您的视频链接将是，您的调查链接将是。因此，当观看视频时，您可以从视频的 ID 中找到要启用的调查链接。
不确定如何用您的代码替换我的链接。我肯定错过了什么。它们是两种完全不同的东西。