J Query for UI Developer: Radio Button Interaction Using J query

HTML

create a simple commands to Single Choice function.

Steps to create a Single Choice function:

To create a Single Choice, you need to declare the header "jquery.js" in the head section.

In the head section you must need to mention the and source as given below.
User need to mention the type to make a different type of functions.

In the body section you must need to declare the following code to make a Single Choice function.

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

<head>

<title>Untitled Document</title>

$(document).ready(function(){

Init();

});

</script>

</head>

<body>

<div class="MCInstruction">Select the <b>best option</b> from the choices given. Then select the <b>Submit</b> button once you have finished.</span>

</div>

<div class="fl">1) "Good afternoon, Ms. Jones. How are you this afternoon?"</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="MCC">Excellent You know the right thing to say at the right time!</span><span class="MCINC1">Try Again! <br /> That not the correct answer.</span> <span class="MCINC2">Take a look for correct answer.</span>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

CSS

This Code for CSS to design the webpage as we needed

body {}

.MultiChoice{display:block;width:745px; height:auto;}

.MultiChoice .InterBorder{ order:solid 10px #569ac9;}

.MultiChoice .InterBody{ font-family:Arial;font-size:12px;color:#000000;width:745px;

height:auto;position:relative;background-color:#eff8ff; line-height:14px;}

.fl{ float:left;}

.fr{ float:right;}

.clr{ clear:both;}

.mgTop10{ margin-top:9px;}

.mgTop8{ margin-top:6px;}

.MCSet{ display:none;}

.MCHead{ height:25px; padding:0px 10px 10px 25px;}

.MCInstruction{ font-family:Arial;font-size:13px;font-style:italic;color:#984842;

margin-left:55px;}

.MCBody{ height:375px; padding:0px 10px;}

.MCFoot{order-top:dashed 1px #025286;height:40px; ackground-color:#bce4fe;}

.MCOption{margin:10px 0px 0px 20px; float:left; width:375px;clear:both;}

.MCButton{ margin:8px 0px 8px 8px; cursor:pointer;}

.MCSubmit{ background:url(../imgs/submit_btn.png) no-repeat; height:24px; width:116px;}

.MCPager{background:url(../imgs/counter_btn.png) no-repeat; height: 15px;

margin: 8px; padding: 2px 30px; width: 20px;}

.MCButtonRight{ width:37px; margin:8px;}

.MCForward{background:url(../imgs/forward_btn.png) no-repeat; height:24px;

width:37px; cursor:pointer; display:none;}

.MCRestart{ background:url(../imgs/restart_btn.png) no-repeat;

height:24px; width:116px; display:none;}

.MCTryAgain{ background:url(../imgs/tryagain_btn.png) no-repeat;

height:24px; width:116px; margin-right:5px; cursor:pointer;}

input{cursor:pointer; margin:0 10px 0 0;}

.RevealCopyRight{ font-size:12px;color:#0A0B0C; width: 180px; margin:10px 0 0 200px;}

.RevealCopyRight .rtxt{ font-family:Arial; font-size:10px;

color: #000000; line-height: 17px;}

.MCFeedback{ background-color: #e6f5ff; border: 1px solid #025286; height: 118px; position: absolute; top: 285px;width: 333px; z-index:2; display:none; left:25px; }

.MCFeedtxt{ height:79px; padding:5px;}

.MCFeedtxt span{ display:none;}

.MCFeedImg{ height:15px; width:16px; }

.MCCorrect{ background:url(../imgs/correct.png) no-repeat;}

.MCinCorrect{ background:url(../imgs/incorrect.png) no-repeat;}

.MCOverlay{ background-color:#ffffff; opacity:0; filter: alpha(opacity=0);

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index:1;

position:absolute; top:0px;left:0px;width:720px; height:410px;display:none;}

.MCDisable{ opacity:0.2; filter: alpha(opacity=20);

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; cursor:default;}

.MCOpTxt{margin-top:3px;display:block;width:300px;}

.img_cont{ width:290px;height:190px;border:1px solid #025286; background-color:#000000;}

.img_txt{ font-size:12px; text-align:center; position:absolute; width:220px; margin:78px 0 0; font-family:Arial, Helvetica, sans-serif; color:#ffffff; padding:0 35px; font-weight:bold;}

.puzzle_imgCont{position:absolute;width:290px;height:190px;}

.puzzle_img{float:left; display:none;}

.puzzle{position:absolute;margin:100px 0px 0px 420px;top:0px;left:0px;}

.puzzle_caption{position:absolute;width:290px;margin:270px 0 0 405px;display:none;}

.contentTopBg { float:left;background: url("../imgs/content_topbg.png") no-repeat scroll 0 0 transparent; height: 28px; width: 745px;}

.contentMiddleBg { float:left; background: url("../imgs/content_middlebg.png") repeat-y scroll 0 0 transparent; min-height:338px; width: 745px;}

.contentBottomBg1a{ background: url("../imgs/content_botbg.png") no-repeat scroll 0 0 transparent; float: left; height: 53px; width: 725px; padding:0 20px 0 0;}

JAVA SCRIPT

This code used all interaction once you used same query are used all radio button interaction

Root=null;

UserAttempt=0;

var puzzle_imgIndex = 0;

function Init(){

Root = $(".MultiChoice");

$(Root).find(".MCSet:first").show();

SetPager();

$(Root).find("input").click(function(){

$(this).closest(".MCSet").find("input").removeClass("attended");

$(this).addClass("attended");

$(Root).find(".MCSubmit").removeClass("MCDisable");

});

$(Root).find(".MCTryAgain").click(function(){

var oCurrSet;

oCurrSet=$(this).closest(".MCSet");

$(oCurrSet).find("input").removeAttr("checked");

$(oCurrSet).find(".MCOverlay").hide();

$(oCurrSet).find(".MCFeedback").hide();

$(oCurrSet).find(".MCFeedback .MCFeedtxt span").hide();

UserAttempt+=1;

});

$(Root).find(".MCSubmit").click(function(){

if(!$(this).hasClass("MCDisable")){

var oCurrSet;

UserAttempt+=1;

oCurrSet = $(Root).find(".MCSet:visible");

$(this).addClass("MCDisable");

$(oCurrSet).find(".MCFeedback").show();

$(oCurrSet).find(".MCOverlay").show();

if($(oCurrSet).find("input.attended").hasClass("MCcrct")){

$(oCurrSet).find(".MCFeedback").find(".MCC").show();

$(oCurrSet).find(".MCFeedback").find(".MCTryAgain").hide();

$(oCurrSet).find("input.attended").parent().find(".MCFeedImg").addClass("MCCorrect");

if($(Root).find(".MCSet:visible").next(".MCSet").length==0){

$(Root).find(".MCRestart").show();

$(this).hide();

showCaption();

}

else{

$(Root).find(".MCForward").show();

}

showPuzzleImg();

}

else{

$(oCurrSet).find("input.attended").parent().find(".MCFeedImg").addClass("MCinCorrect");

if(UserAttempt==1){

$(oCurrSet).find(".MCFeedback").find(".MCINC1").show();

$(oCurrSet).find(".MCFeedback").find(".MCTryAgain").show();

}

else{

$(oCurrSet).find(".MCFeedback").find(".MCINC2").show();

$(oCurrSet).find(".MCFeedback").find(".MCTryAgain").hide();

$(oCurrSet).find("input.MCcrct").parent().find(".MCFeedImg").addClass("MCCorrect");

if($(Root).find(".MCSet:visible").next(".MCSet").length==0){

$(Root).find(".MCRestart").show();

$(this).hide();

showCaption();

}

else{

$(Root).find(".MCForward").show();

}

showPuzzleImg();

}

});

$(Root).find(".MCForward").click(function(){

var oCurrSet;

UserAttempt=0;

$(this).hide();

oCurrSet = $(Root).find(".MCSet:visible");

$(oCurrSet).next(".MCSet").show();

$(oCurrSet).hide();

SetPager();

});

$(Root).find(".MCRestart").click(function(){

UserAttempt=0;

$(this).hide();

$(Root).find(".MCSet:visible").hide();

$(Root).find(".MCSet:first").show();

$(Root).find(".MCFeedback").hide();

$(Root).find(".MCOverlay").hide();

$(Root).find(".MCFeedback").find("span").hide()

$(Root).find(".MCCorrect, .MCinCorrect").removeClass("MCCorrect").removeClass("MCinCorrect");

$(Root).find("input").removeAttr("checked");

$(Root).find(".MCSubmit").show();

SetPager();

hidePuzzleImg();

});

};

SetPager=function(){

$(Root).find(".MCPager").text( ($(Root).find(".MCSet").index($(Root).find(".MCSet:visible"))+1) + "/" + $(Root).find(".MCSet").length);

};

function showPuzzleImg(){

puzzle_imgIndex = $(Root).find(".MCSet").index($(Root).find(".MCSet:visible"));

$('.img_txt').hide();

$('.puzzle_imgCont img:eq('+puzzle_imgIndex+')').show();

}

function hidePuzzleImg(){

$('.puzzle_imgCont img,.puzzle_caption').hide();

$('.img_txt').show();

}

function showCaption(){

$('.puzzle_caption').show();

}

J Query for UI Developer

Pages

Radio Button Interaction Using J query

2 comments: