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
Need to know if Intuiface can do this:
Hi @emilio.iantorno and welcome to the Intuiface community!
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.
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>
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.