/    Sign up×
Community /Pin to ProfileBookmark

flipbox

Copy linkTweet thisAlerts:
Jun 21.2011

Hi
Can anyone help with this….

I’m trying to create a flip box that has text on either side. One side will be correct and one side will be incorrect.

I need to work out…

[LIST]

  • [*]

    How to write different text on the other side of each flip box.

  • [*]

    How to differentiate between when the box is flipped and when it isnt (to assign a value)

  • [*]

    How to disable boxes when all are correct or how to add a subit button so that when users think the boxes are correct they click to check answers


    • [/LIST]

    So far I have this and now im stuck, its not doing exactly what i want. I’m new to all this and just need a bit of guidance…

    [CODE]<style>
    .content {
    width: 880px;
    height:180px;
    }

    .test {
    width:800
    height:100

    }
    .answers{
    position:absolute;
    width:25px;
    height:20px;
    left: 200px;
    top: 4px;
    }

    .correct{
    background-repeat:no-repeat;
    background-image:url(assets/correct-small.png);
    z-index:1;
    }

    .incorrect{
    background-repeat:no-repeat;
    background-image:url(assets/incorrect-small.png);
    z-index:1;
    }

    .flip {
    position:relative;
    float:left;
    margin-left:3px;
    margin-right:3px;
    width: 500px;
    height: 22px;
    padding: 3px;
    margin-bottom: 2px;
    border: 1px #CCC solid;
    background-color: #EFEFEF;
    text-align: center;
    }

    .flip:hover{
    cursor: pointer;
    background-color: #FFF;
    }
    </style>

    <script language=”javascript”>
    trueCount = 0;
    falseCount = 0;

    for(i=1;i<=15;i++) {
    $(“#flipbox” + i).click(function(){
    $(this).flip({
    direction:’tb’,
    color: ‘#EFEFEF’,

    });
    });
    }

    function addAnswer(div, answer){

    if($(“#”+div).hasClass(“correct”)) {
    trueCount–;
    $(“#”+div).removeClass(“correct”);
    }
    else {
    $(“#”+div).addClass(“correct”);
    answersArray[trueCount] = $(“#”+div).parent().html().substr(0, $(“#”+div).parent().html().indexOf(‘<‘));
    trueCount++;
    if(trueCount == 2) {
    $(“.test”).fadeOut(1000, function(){
    $(this).html(“<h3>Correct – </h3>”
    ).fadeIn(1000);
    })
    }
    }
    }
    updateBookmark();
    </script>

    <br /><br />
    <div class=”content”>
    <div class=”flip” onclick=”addAnswer(‘answer1′,’c’)” id=”flipbox1″>Reading a book<div class=”answers” id=”answer1″></div></div>
    <div class=”flip” onclick=”addAnswer(‘answer2′,’t’)” id=”flipbox2″>Position their body so that they are facing you <div class=”answers” id=”answer2″></div></div>
    <div class=”flip” onclick=”addAnswer(‘answer3′,’c’)” id=”flipbox3″>Talk<div class=”answers” id=”answer3″></div></div>
    <div class=”flip” onclick=”addAnswer(‘answer4′,’t’)” id=”flipbox4″>Make eye contact<div class=”answers” id=”answer4″></div></div>
    <div class=”flip” onclick=”addAnswer(‘answer5′,’c’)” id=”flipbox5″>Ask questions<div class=”answers” id=”answer5″></div></div>
    </div>
    <div class=”test”></div>

    [/CODE]

    to post a comment
    JavaScript

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @vwphillipsJun 21.2011 — [CODE]<!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" xml:lang="en" lang="en">

    <head>
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/

    #tst {
    position:absolute;left:400px;top:100px;width:300px;height:200px;
    }

    .flip {
    position:absolute;visibility:hidden;z-Index:2;left:0px;top:0px;width:300px;height:200px;background-Color:#FFCC66;
    }

    .panel {
    position:absolute;left:0px;top:0px;width:300px;height:200px;background-Color:#FFFFCC;text-Align:center;border:solid red 1px;
    }

    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (11-January-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.

    // **** Application Notes

    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //

    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    // A = a global variable (variable)
    // parameter 0 = the mode(see Note 1). (string)
    // parameter 1 = the unique ID name or element object. (string or element object)
    // parameter 1 = the initial value. (digits, default = 0)

    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    // A = the global referencing the script instance. (variable)
    // parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
    // parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
    // parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    // parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
    // field 0 the minimum value. (digits)
    // field 1 the maximum value. (digits)
    // parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
    // 'sin' progression starts fast and ends slow.
    // 'cos' progression starts slow and ends fast.
    //
    // Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    // Note 2: The default units(excepting opacity) are 'px'.
    // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    // Note 3: The scale is of particular use when re-calling the effect
    // in mid progression to retain an constant rate of progression.
    // Note 4: The current effect value is recorded in A.data[0].
    // Note 5: A function may be called on completion of the effect by assigning the function
    // to the animator intance property .Complete.
    // e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //



    // **** Functional Code(1.52K) - NO NEED to Change

    function zxcAnimate(mde,obj,srt){
    this.to=null;
    this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
    this.mde=mde.replace(/W/g,'');
    this.data=[srt||0];
    return this;
    }

    zxcAnimate.prototype={

    animate:function(srt,fin,ms,scale,c){
    clearTimeout(this.to);
    this.time=ms||this.time||0;
    this.neg=srt<0||fin<0;
    this.data=[srt,srt,fin];
    this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
    this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
    this.inc=Math.PI/(2*this.mS);
    this.srttime=new Date().getTime();
    this.cng();
    },

    cng:function(){
    var oop=this,ms=new Date().getTime()-this.srttime;
    this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
    this.apply();
    if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
    else {
    this.data[0]=this.data[2];
    this.apply();
    if (this.Complete) this.Complete(this);
    }
    },

    apply:function(){
    if (isFinite(this.data[0])){
    if (this.data[0]<0&&!this.neg) this.data[0]=0;
    if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
    else zxcOpacity(this.obj,this.data[0]);
    }
    }

    }

    function zxcOpacity(obj,opc){
    if (opc<0||opc>100) return;
    obj.style.filter='alpha(opacity='+opc+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }


    </script>


    </head>

    <body>
    <div id="tst" >
    <div class="flip" ></div>
    <div class="panel" >Panel 0</div>
    <div class="panel" >Panel 1</div>
    </div>
    <input type="button" name="" value="GoTo 0" onmouseup="F1.GoTo(0);" />
    <input type="button" name="" value="GoTo 1" onmouseup="F1.GoTo(1);" />
    http://www.webdeveloper.com/forum/showthread.php?t=247905
    http://lab.smashup.it/flip/
    <script type="text/javascript">
    /*<![CDATA[*/
    // Flip (21-July-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    function zxcFlip(o){
    var oop=this,obj=document.getElementById(o.ID),flip=obj.getElementsByTagName('DIV')[0],w=obj.offsetWidth,h=obj.offsetHeight,panels=this.bycls(o.PanelClass,obj),z0=0,mde=o.Mode,ms=o.AnimationSpeed;
    var exp=50;
    this.oops=[new zxcAnimate('left',flip,0),new zxcAnimate('top',flip,0),new zxcAnimate('width',flip,w),new zxcAnimate('height',flip,h)];
    this.oops[0].Complete=function(){
    if (this.ud=='s'){
    oop.flip('c');
    }
    else {
    this.obj.style.visibility='hidden';
    oop.panels[oop.cnt].style.visibility='visible';
    }
    }
    this.back=[0,0,w,h];
    this.fwd=[[w/2,-exp/2,0,h+exp],[-exp/2,h/2,w+exp,0]];
    this.ms=isFinite(ms)&&ms>0?ms:1000
    this.mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?1:0;
    for (;z0<panels.length;z0++){
    panels[z0].style.visibility=z0>0?'hidden':'visible';
    }
    this.panels=panels;
    this.cnt=0;
    }

    zxcFlip.prototype={

    GoTo:function(nu){
    if (this.panels[nu]&&nu!=this.cnt){
    this.panels[this.cnt].style.visibility='hidden';
    this.cnt=nu;
    this.flip('s');
    }
    },

    flip:function(ud){
    var oops=this.oops,z0=0,data=ud=='s'?this.fwd[this.mde]:this.back;
    oops[0].ud=ud;
    oops[0].obj.style.visibility='visible';
    for (;z0<oops.length;z0++){
    oops[z0].animate(oops[z0].data[0],data[z0],this.ms,null,ud);
    }
    },

    bycls:function (nme,el){
    for (var reg=new RegExp('\b'+nme+'\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
    if(reg.test(els[z0].className)){
    ary.push(els[z0]);
    }
    }
    return ary;
    }

    }

    var F1=new zxcFlip({
    ID:'tst', // the unique ID name of the parent DIV. (string)
    PanelClass:'panel', // the common class name of the panels. (string)
    Mode:'Horizontal', //(optional) 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
    AnimationSpeed:500 //(optional) the animation duration in milli seconds. (string, default = 'Horizontal')
    });

    /*]]>*/
    </script>

    </body>

    </html>[/CODE]
    Copy linkTweet thisAlerts:
    @katybabyauthorJun 23.2011 — Thank you for your help. Its not exactly what im looking for but you have some goods scripts.

    I already have the images flipping when they click on it but I wont it to show text on the other side. I dont really want to use a button to flip them.

    I did want them to be able to submit one button once they have decided which way they want it tom be flipped to check if they have the answers correct,.
    Copy linkTweet thisAlerts:
    @vwphillipsJun 23.2011 — see example 2

    [CODE]<!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" xml:lang="en" lang="en">

    <head>
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/

    #example1 {
    position:absolute;left:400px;top:100px;width:300px;height:200px;
    }

    .flip {
    position:absolute;visibility:hidden;z-Index:2;left:0px;top:0px;width:300px;height:200px;background-Color:#FFCC66;
    }

    .panel {
    position:absolute;left:0px;top:0px;width:300px;height:200px;border:solid red 1px;
    }

    #example2 {
    position:absolute;left:400px;top:350px;width:300px;height:200px;
    }

    .div {
    position:absolute;left:0px;top:0px;width:300px;height:200px;background-Color:#FFFFCC;text-Align:center;font-Size:55px;border:solid red 1px;
    }

    INPUT {
    width:80px;font-Size:12px;background-Color:#FFCC66;
    }

    /*]]>*/
    </style>

    <script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript">
    // featured on http://www.vicsjavascripts.org.uk/Animate/Animate.htm
    </script>

    <script type="text/javascript">
    /*<![CDATA[*/
    // Flip Slide Show (22-July-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    /*

    A slide show where an element is flipped horizontally or vertically to reveal the next frame.
    The flip and frame elements may be IMG or DIV elements.
    Where both the flip and frame elements are images
    the flip image src may be swapped to reflect the previous and next images.

    The functional code size is 3.01K.

    The script utilizes my 'Animate' script featured on http://www.vicsjavascripts.org.uk/Animate/Animate.htm

    ****** Application Notes

    **** The HTML and CSS Code.

    removed to allow posting

    **** Initializing the Script.

    Each instance of the script is initialized by creating a new instance function passing script options as an object.
    Each instance of the script must be assigned to a global variable to allow control by inline event calls.
    e.g.
    var F1=new zxcFlipSlideShow({
    ID:'example1', // the unique ID name of the parent DIV. (string)
    PanelClass:'panel', // the common class name of the panels. (string)
    FlipClass:'flip', //(optional) the common class name of the flip panel. (string, default = a clone of the first panel element)
    Mode:1, //(optional) 0 = 'Horizontal' or 1 = 'Vertical'. (number, default = 0 = 'Horizontal')
    ExpandBy:50, //(optional) to expand and contract the flip element during the flip. (number, default = 0)
    SwapImage:true, //(optional) to swap the flip image if both the flip and panel are images. (boolean, default = true)
    AnimationSpeed:1000, //(optional) the flip animation duration in milli seconds. (string, default = 'Horizontal')
    HoldDuration:1000, //(optional) the auto rotate 'hold' duration in milli seconds. (string, default = 'Horizontal')
    AutoStart:true //(optional) true = automatically start auto rotation on initialization. (boolean, default = true, false = no auto start)
    });


    **** Controlling the Script.
    The script is controlled by inline event calls to functions 'Next', 'GoTo', 'Mode', 'Auto' and 'Pause'.

    ** Function 'Next'.
    Function 'Next' rotates the frames forward or back by one frame.
    e.g.
    <input type="button" name="" value="Forward" onmouseup="F1.Next(1,0);" />
    <input type="button" name="" value="Back" onmouseup="F1.Next(-1,1);" />
    where:
    F1 = the script instance global variable.
    parameter 0 = (optional) the direction, > 0 = forward, > 0 = back. (number, default = 1)
    parameter 1 = (optional) the mode, 0 = horizontal, 1 = vertical. (number, default = the current mode)

    ** Function 'GoTo'.
    Function 'GoTo' turns the book to a specified frame.
    e.g.
    <input type="button" name="" value="Page 2" onmouseup="F1.GoTo(1,0);" />
    where:
    F1 = the script instance global variable.
    parameter 0 = the frame index number. (number)
    parameter 1 = (optional) the mode, 0 = horizontal, 1 = vertical. (number, default = the current mode)

    ** Function 'Mode'.
    Function 'Mode' may be used change the mode of execution.
    e.g.
    <input type="button" name="" value="Horizontal" onmouseup="F1.Direction(0);" />
    <input type="button" name="" value="Vertical" onmouseup="F1.Direction(1);" />
    where:
    F1 = the script instance global variable.
    parameter 0 = (optional)the mode of execution, 0 = 'Horizontal' or 1 = 'Vertical' or 2 = toggle mode. (number, default = current mode)

    ** Function 'Auto'.
    Function 'Auto' automatically turns the pages.
    e.g.
    <input type="button" name="" value="Auto Forward" onmouseup="F1.Auto(1);" />
    <div id="example1" onmouseover="F1.Pause();" onmouseout="F1.Auto(0);" >
    where:
    F1 = the script instance global variable.
    parameter 0 = (optional) the direction, 1 = forward, -1 = back, 2 = toggle direction. (number, default = the current direction)
    parameter 1 = (optional) the mode, 0 = horizontal, 1 = vertical. (number, default = the current mode)

    ** Function 'Pause'.
    Function 'Pause' pauses automatic page turning.
    e.g.
    <input type="button" name="" value="Auto Forward" onmouseup="F1.Pause();" />
    <div id="wxample1" onmouseover="F1.Pause();" onmouseout="F1.Auto();" >
    where:
    F1 = the script instance global variable.


    */

    // **** Functional Code - NO NEED to Change

    function zxcFlipSlideShow(o){
    var oop=this,obj=document.getElementById(o.ID),w=obj.offsetWidth,h=obj.offsetHeight,panels=this.bycls(o.PanelClass,obj),flip=this.bycls(o.FlipClass,obj)[0],flip=flip||panels[0].cloneNode(true),mde=o.Mode,mde=isFinite(mde)&&mde==1?1:0,exp=o.ExpandBy,exp=o.ExpandBy,exp=isFinite(exp)?exp:0,swap=o.SwapImage,z0=0,ms=o.AnimationSpeed,hold=o.HoldDuration,srt=o.AutoStart;
    flip.style.zIndex='101';
    flip.style.visibility='hidden';
    obj.appendChild(flip);
    this.oops=[new zxcAnimate('left',flip,0),new zxcAnimate('top',flip,0),new zxcAnimate('width',flip,w),new zxcAnimate('height',flip,h)];
    this.oops[0].Complete=function(){
    if (oop.ud=='s'){
    oop.swap();
    oop.flip('c');
    }
    else {
    this.obj.style.visibility='hidden';
    oop.panels[oop.cnt].style.visibility='visible';
    }
    }
    for (;z0<panels.length;z0++){
    panels[z0].style.position='absolute';
    panels[z0].style.visibility=z0>0?'hidden':'visible';
    }
    this.obj=flip;
    this.mde=mde;
    this.nxt=[0,0,w,h];
    this.fwd=[[w/2,-exp/2,0,h+exp],[-exp/2,h/2,w+exp,0]];
    this.ms=isFinite(ms)&&ms>0?ms/2:500;
    this.hold=(isFinite(hold)&&hold>0?hold:1000)+this.ms*2;
    this.panels=panels;
    this.ud='c';
    this.img=flip.nodeName.toUpperCase()=='IMG'&&(typeof(swap)!='boolean'||swap);
    this.to=null;
    this.aud=1;
    this.cnt=0;
    if (isFinite(hold)&&(typeof(srt)!='boolean'||srt)){
    this.to=setTimeout(function(){ oop.auto(); },this.hold-this.ms*2);
    }
    }

    zxcFlipSlideShow.prototype={

    Next:function(ud,mde){
    this.Pause();
    this.Mode(mde);
    var ud=isFinite(ud)&&ud<0?-1:1,lgth=this.panels.length-1,nu=this.cnt+ud,nu=nu<0?lgth:nu>lgth?0:nu;
    this.aud=ud;
    this.GoTo(nu);
    },

    GoTo:function(nu,mde){
    this.Pause();
    this.Mode(mde);
    if (this.ud=='c'&&this.panels[nu]&&nu!=this.cnt){
    this.panels[this.cnt].style.visibility='hidden';
    this.swap();
    this.cnt=nu;
    this.flip('s');
    }
    },

    Mode:function(mde){
    if (this.ud=='c'){
    this.mde=mde==0?0:mde==1?1:mde==2?this.mde==1?0:1:this.mde;
    }
    },

    Auto:function(ud,mde){
    this.Pause();
    var oop=this;
    this.to=setTimeout(function(){ oop.auto(ud,mde); },200);
    },

    Pause:function(ud){
    clearTimeout(this.to);
    },

    flip:function(ud){
    var oops=this.oops,z0=0,data=ud=='s'?this.fwd[this.mde]:this.nxt;
    this.ud=ud;
    oops[0].obj.style.visibility='visible';
    for (;z0<oops.length;z0++){
    oops[z0].animate(oops[z0].data[0],data[z0],this.ms,null,ud);
    }
    },

    auto:function(ud,mde){
    var oop=this,ud=ud==0?-1:ud==1?1:ud==2?this.aud*=-1:this.aud;
    this.Mode(mde);
    this.Next(ud);
    this.to=setTimeout(function(){ oop.auto(ud); },this.hold);
    },

    swap:function(){
    var panel=this.panels[this.cnt];
    if (this.img&&panel.nodeName.toUpperCase()=='IMG'){
    this.obj.src=panel.src;
    }
    },

    bycls:function (nme,el){
    for (var reg=new RegExp('\b'+nme+'\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
    if(reg.test(els[z0].className)){
    ary.push(els[z0]);
    }
    }
    return ary;
    }

    }

    /*]]>*/
    </script>

    <script type="text/javascript">
    /*<![CDATA[*/

    var F1,F2;
    function Init(){

    F2=new zxcFlipSlideShow({
    ID:'example2',
    PanelClass:'div',
    FlipClass:'flip',
    ExpandBy:50
    // HoldDuration:1000,
    // AutoStart:true
    });

    }

    /*]]>*/
    </script>
    </head>

    <body onload="Init();" >
    <div id="example2" onmouseup="F2.Next(1);" >
    <div class="flip" ></div>
    <div class="div" >
    <br />
    DIV 0
    </div>
    <div class="div" >
    <br />
    DIV 1
    </div>
    </div>

    http://www.webdeveloper.com/forum/showthread.php?t=247905
    http://lab.smashup.it/flip/


    </body>

    </html>[/CODE]
    ×

    Success!

    Help @katybaby spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.20,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...