Word selection for phrase formation

Navigation
0

For ease of explanation, I have separated the following mockup:

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 clicks. In addition, the option clicked is moved to the last div , where a sentence is created based on the 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?

    
asked by anonymous 12.05.2014 / 17:21

2 answers

1

Can you use jQuery? If so, I hope this code will help you.

Can you assign an id for each option? If so, this will make the logic simpler - and selection through the faster DOM. 

  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()
        );

    }

  });
    
13.05.2014 / 04:18
0

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

    
13.05.2014 / 14:53
Accessing the server through linux Map path of another project