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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/01_05_01c_i1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/01_05_01c_i1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Init();
});
</script>
</head>

<body>
<div class="iBody">
<div class="MultiChoice">
<div class="InterBorder">
<div class="contentTopBg"></div>
<div class="contentMiddleBg">       
<div class="InterBody">
<div class="MCHead">
<img src="../module01/01_04_01c_i1/web/imgs/mouse_icon.png" class="fl" alt="" />
<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>
<div class="MCBody">
<div class="puzzle_caption"></div>
<div class="MCSet" style="display:block;">
<div class="fl" style="width:680px; margin:15px; float:left; ">
<div class="fl">1) "Good afternoon, Ms. Jones. How are you this afternoon?"</div>
<div class="MCOption">
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">hi</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">h2</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">h3</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl MCcrct" /><span class="fl MCOpTxt">h4</span>
</div>
<div class="clr">
</div>
<div class="fl mgTop10">
<span class="fl MCFeedImg"></span>
<input type="radio" name="set1" class="fl" /><span class="fl MCOpTxt">h5</span>
</div>
<div class="clr">
</div>
</div>
</div>
<div class="MCOverlay"></div>
<div class="MCFeedback">
<div class="MCFeedtxt">
<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 class="fr MCTryAgain">
</div>
</div>
<div class="clr">
</div>
</div>

</div>
</div>
</div>
<div class="contentBottomBg1a">
<div class="MCFoot">
<div class="fl">
<div class="RevealCopyRight">&copy; 2012 Associated Press
</div>
</div>
<div class="fr MCButtonRight">
<div class="MCForward">
</div>
</div>
<div class="fr MCButton">
<div class="MCSubmit MCDisable">
</div>
<div class="MCRestart">
</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();
}

2 comments:

  1. great work....
    see my collection.its really useful.. http://www.tutpicks.com

    ReplyDelete