Word selection for phrase formation

Asked

Viewed 282 times

0

To facilitate the explanation, I have separated the following mockup:

http://i62.tinypic.com/5l2yih.png

The idea is this:

Each of the options in the DIV is originally not visible, the idea is that an option is visible only after the user click. Also, the clicked option is transferred to last div, where a sentence is created based on users' choices in the three boxes.

How can I make the user choose only one option per box (when selecting one, the previous selection is forgotten/blocked)? And how can I transfer these choices to the last div, where a sentence will be formed?

javascript jquery css css3 grid

  • Image does not load.

  • It looks normal here. Anyway, here’s a mirror http://imgur.com/OgHfLHe

  • Can you edit the question to include the relevant part of the code you already have, please? It will give you a better idea of how to answer.

  • Use Jquery, so when the user clicks on an option others are forgotten/cleaned up (I won’t go into it because you find a lot in Google about style changes and other things with Jquery).

  • For example, the user clicked on box 1: [box0], [box1], [box2]; when he clicks [box2] you forget the other boxes: [box0], [box1], [box2]. Already the transfer you can take the clicks and save in an array and at the end use the method . append() and insert in the last div. See how amazing Jquery is?

  • 1

    It reminded me a lot of that strip: http://xkcd.com/1350/!

  • It would look something like this http://jsfiddle.net/zpykZ/ ??

  • @Erloncharles would be interesting if you publish what you did as a response.

  • I first wanted to know if it is at least something like this, if it is and have some caveat I publish as an answer and I go making the modifications.

Show 4 more comments

2 answers

1

Can you use jQuery? If yes, I hope this code helps you.

Can you assign an id to each option? If yes, this will make logic simpler - and selecting through the DOM faster.

  sentenca = []; // criamos uma array para guardar as divs selecionadas

    $('.selectable').click(function(){

      //ao cliclar na div...

      $(this).addClass('visible'); //adicionamos uma classe para tornar seu conteúdo visível

      var myId = $(this).attr('id');  //vamos pegar a id da div
      sentenca.push(myID);  //e guardá-la na array

      if(sentenca.length >= 3){

        // se ela tiver mais de 3 divs, vamos apagar a 4a mais velha
        sentenca.splice(4, 1);
      }

    for (var i=0;i<sentenca.length;i++){

      //agora vamos passear pela array

      //vamos colocar na ultima div (nome 'receiver') clones das 3 últimas divs selecionadas
      $('#receiver').append(
        $('#'+sentenca[i]).clone()
        );

    }

  });

0

Use angular.js to create a Binding between the Ivs and templates. Use ng-click to execute selection methods located in the controller.

Browser other questions tagged javascript jquery css css3 grid

You are not signed in. Login or sign up in order to post.