Read full agreement and then say "I agree"

Lot of sites show some licence text, make you accept it and only then you can proceed with the download/next pages. In order to make sure that you read these, some UI applications have a feature that the "I Agree" button is activated only when you have scrolled through the entire licence agreement.

While this is easy to implement in WindowsUI, following a sample snippet how we implemented it in our web applications.

<div style="HEIGHT: 150px; OVERFLOW: auto" onscroll="javascript:displayScroll(this);">
I Agree I cannot agree to this agreement.<br/>I Agree I cannot agree to this agreement.<br/>
I Agree I cannot agree to this agreement.<br/>I Agree I cannot agree to this agreement.<br/>
I Agree I cannot agree to this agreement.<br/>I Agree I cannot agree to this agreement.<br/>
I Agree I cannot agree to this agreement.<br/>I Agree I cannot agree to this agreement.<br/>
I Agree I cannot agree to this agreement.<br/>I Agree I cannot agree to this agreement.<br/>
</div>
<input name="txtScroll">
<input value="Submit" type="button" name="btnIAgree">

<script language="javascript">
function displayScroll(val) {
document.getElementById("txtScroll").value = val.scrollTop + " " + val.scrollHeight + " " + val.clientHeight;
if(val.scrollTop + val.clientHeight == val.scrollHeight)
{
document.getElementById("btnIAgree").disabled=false;
}

}
</script>


Basically, we have used the scrollbar for div here and the scroll javascript event.
Inside the scroll event, we see if it has really reached the end and if yes, then we enable the button.

To Do Further
1. Validate if (val.scrollTop + val.clientHeight == val.scrollHeight) is really correct. I concluded this with just observation
2. If the agreement text is small, we need to enable the button on page load itself since there might not be any scrollbar.

Anyways, we can only ensure that the user has scrolled and can never ensure that user actually has read the agreement. We will need AI to be able to check if he really read the agreement :-).

Comments

Post a Comment

Popular posts from this blog

Dirty workarouds: dirty page checking + AJAX

Dirty page checking is scenario when you have a form, user does some modifications and before hitting the save button, tries to leave the page. Enterprise web applications have a requirement to intimate the user that "there are unsaved details" and "do you really want to move away from this page". The idea of solution behind this is 1. use of window.beforeunload and 2. use of onchange to register the window.beforeunload. As setting window.beforeunload manually for each control can be timeconsuming, we need a generic solution which will work with minimal code changes. If you search for this on internet, you will find the following generic code: <script type="text/javascript"> function setDirty() { window.onbeforeunload = showNavigateAwayMessage; } function clearDirty() { window.onbeforeunload = ""; } function showNavigateAwayMessage() { return "There is some unsaved Data in this form." } function setControlChangeEvent() { if (typeo...
Read more

ASP Upload and localization

The Asp.Net (or in general html) file upload control displays the text "Browse". There is no attribute which allows controlling the text displayed. This goes against the localization principals which says every text/label may appear in local language. I did the following workaround... (Is there any simpler workaround... Your suggestions are welcome) ===Explanation=== Basically I hide the actual upload control and instead use proxy controls which look similar to the ones rendered by the browser and are localized. I have used javascripts to hook up required events to make it work like an exact original browser one. ====ASPX file==== <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FileUpload._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script language=javascript> function Bubb...
Read more