Forms , need to know if this can be done using Intuiface

Need to know if Intuiface can do this:

  • Touch screen
  • Ask a users to answer a question with multiple choice answers
  • Answers will then display as a word cloud​

Hi @emilio.iantorno and welcome to the Intuiface community!

  • Touch screen
    • Yes, touch interaction is in the DNA of Intuiface, although it supports a lot of other interaction methods
  • Ask a users to answer a question with multiple choice answers
    • Yes, you can see an example here or here. There are lots of different ways to create such experiences within Intuiface.
  • Answers will then display as a word cloud​
    • I’d need more details on what you are trying to achieve here (multiple choice answers are usually pre-determined, a cloud of answers could mean you are expecting open text answers), but here is one visual example of what it could look like.

Don’t hesitate to contact our team if you want to have a discussion about your project.

Seb

Thank you for your quick response.

Here is a product we are testing out https://test12345.display.vevox.com/#/present/289632/RYTVGVCT4TQ8NBPSO05N

Its a poll with one question and as people answer the word cloud starts to appear with words they have chosen.
What we are trying to do is have multiple choice questions (predetermined) and they can only choose the one answer and it builds a word cloud as they answer.

Does that help? If you can give me some tips on how to do it that would be great.

I have used Intuiface before and im trying to get my colleagues to buy in for other projects we do.

1 Like

Thanks for sharing the link, that’s a bit clearer.

Building the poll and answering system for the mobile isn’t the complex part, you can actually see another example here.

Creating the cloud with the proper layout for the texts, and pondering the size, location and orientation of the texts based on the number of answers received for each of these texts is a bit more complex.
Intuiface won’t have an off-the-shelf collection for such conditioned layout, but if you have an idea of the algorithms you’d like to use to generate such layout based on the number of texts, their lengths and the number of votes for each, you can probably build this by creating a custom Interface Asset. This would enable you to create a data feed for these answers with their position, size, orientation that you can then use in a free-form collection such as a Group.

Another approach could be to use an external library through an HTML Frame asset that would handle the “text visualization” part for you. See an example here: Word Cloud Generator
Lots of other good sources to read about in this thread: layout - Algorithm to implement a word cloud like Wordle - Stack Overflow

Actually, here’s a quick example I tested in my Composer

and the HTML code I used below (credits to JS Bin - Collaborative JavaScript Debugging)

The remaining part would be to generate the “words” part to insert in that script and this where a Custom Interface Asset would be the simplest way to go, in my opinion.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>WordCloud d3-cloud Demo</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>

<script>
$(document).ready(function() {
  var width = 1200;
  var height = 650;
    
  var color = d3.scale.category20();
  //var color = d3.scale.linear().domain([0,1,2,3,4,5,6,10,15,20,100])
  //.range(["#F00", "#E00", "#D00", "#C00", "#B00", "#A00", "#900", "#800", "#700", "#600", "#500", "#400"]);
  
  var words = [
    {"text":"study","size":40},
    {"text":"motion","size":15},
    {"text":"forces","size":10},
    {"text":"electricity","size":15},
    {"text":"movement","size":10},
    {"text":"relation","size":10},
    {"text":"things","size":10},
    {"text":"force","size":5},
    {"text":"ad","size":5},
    {"text":"energy","size":85},
    {"text":"living","size":10},
    {"text":"nonliving","size":10},
    {"text":"laws","size":15},
    {"text":"speed","size":45},
    {"text":"velocity","size":30},
    {"text":"define","size":10},
    {"text":"constraints","size":10},
    {"text":"universe","size":10},
    {"text":"physics","size":100},
    {"text":"describing","size":10},
    {"text":"matter","size":90},
    {"text":"physics-the","size":10},
    {"text":"world","size":10},
    {"text":"works","size":10},
    {"text":"science","size":70},
    {"text":"interactions","size":30},
    {"text":"studies","size":5},
    {"text":"properties","size":45},
    {"text":"nature","size":40},
    {"text":"defintions","size":10},
    {"text":"two","size":15},
    {"text":"grouped","size":15},
    {"text":"traditional","size":15},
    {"text":"fields","size":15},
    {"text":"acoustics","size":15},
    {"text":"optics","size":15},
    {"text":"mechanics","size":20},
    {"text":"thermodynamics","size":15},
    {"text":"electromagnetism","size":15},
    {"text":"modern","size":15},
    {"text":"extensions","size":15},
    {"text":"thefreedictionary","size":15},
    {"text":"interaction","size":15},
    {"text":"org","size":25},
    {"text":"department","size":10},
    {"text":"gravitation","size":10},
    {"text":"heat","size":10},
    {"text":"light","size":10},
    {"text":"magnetism","size":10},
    {"text":"modify","size":10},
    {"text":"general","size":10},
    {"text":"bodies","size":15},
    {"text":"philosophy","size":15},
    {"text":"brainyquote","size":15},
    {"text":"words","size":15},
    {"text":"ph","size":15},
    {"text":"html","size":15},
    {"text":"lrl","size":15},
    {"text":"zgzmeylfwuy","size":15},
    {"text":"subject","size":15},
    {"text":"distinguished","size":15},
  ];
  
  var vis = document.getElementById("wordcloud");
  var layout = d3.layout.cloud().size([width, height])
    .words(words)
    .padding(2)
    .rotate(function() { return (~~(Math.random() * 6) - 3) * 20; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .spiral("archimedean")
    .on("end", draw);
  
  layout.start();
  
  function draw(words) {
    d3.select("#wordcloud").append("svg")
      .style("width", "100%")
      .style("height", height+"px")
      .attr("viewBox", "0 0 " + width + " " + height)
      .attr("preserveAspectRatio", "xMidYMin meet")
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .selectAll("text")
      .data(words).enter().append("text")
      .style("font-size", function(d) { return d.size + "px"; })
      .style("font-family", "Impact")
      .style("fill", function(d, i) { return color(i); })
      .attr("text-anchor", "middle")
      .attr("transform", function(d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function(d) { return d.text; })
    ;
  }  
  
});
</script>
</head>
<body>
  <div id="wordcloud"></div>
</body>
</html>
2 Likes

Thank you for getting back to me with your help, i appreciate it! I will take this back to my team and see what they want to do.