如何在視頻完全收看之前停用調查？

我們知道我們認爲合適的解決方案。我們只是不知道該怎麼去做。

我們有六個視頻我們希望我們的用戶觀看。

每個視頻都伴隨着一項調查。

每個調查都可以有一個或多個問題。

這裏是如何的視頻和調查被組織截圖：

Videos and associated surveys

當年這裏是產生在隨附的屏幕截圖的視頻和調查的代碼。

<%@ 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是要走的路，但我很難理解如何去做。

感謝很多提前

來源

2014-02-14 Kenny

嘗試增加您的物品ID的匹配控制的ID，即

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

...

然後在文檔中。準備就緒（）使用jquery選擇啓用僅第一視頻：

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

來源

2014-02-18 16:58:36 artm

感謝您的回覆。我一直非常沮喪。我正在嘗試您的建議。我會發布更新。請留意。再次感謝。 – Kenny

Hi @artm，再次感謝。我發佈了我用來在我發佈的截圖上生成鏈接的代碼。是否有無論如何你可以幫助使用該代碼並與你的集成？我有點困惑如何讓你的代碼和我的工作。 – Kenny

Kenny，用您的代碼中的鏈接取代asp：超鏈接，並添加我發送的JS代碼。這個想法是，當您在鏈接的ID中使用當前項目的ID時，那麼當觀看視頻時，您可以找到啓用哪個A.您的視頻鏈接將爲，您的調查鏈接將爲。因此，觀看視頻時，您可以從視頻ID中找到啓用哪個調查鏈接。 – artm

如何在視頻完全收看之前停用調查？

回答

相關問題