Goal:
Display a word cloud from one Survey123 question - where the data in the word cloud updates when new data are submitted.
Warnings:
1. This is an HTML code "hack" and not a part of the supported product features for either Survey123 or Storymaps.
2. For this to work, ALL data in the Survey123 must be shared either with your organization or with everyone. If you have private or sensitive data ANYWHERE in the survey, you should not use this method.
Sample:
Take a look at this storymap to better understand what we'll try to set-up below.
Requirements:
Access to Survey123 and Storymaps through an ArcGIS Online account with publisher role (or higher).
Knowledge of how to use Survey123 and Storymaps (I gloss over most basic concepts in this post).
An offsite location to host your HTML page. I'm using GitHub, but you can use any host that allows you to post HTML code and enforces "https" (rather than just http).
Some knowledge of HTML/CSS (although most of this blog is copy/paste).
Build out:
Create a new Survey123 survey with at least two questions . The questions should NOT ask personal information (like email address or physical characteristics). Try asking, "What is your favorite color?", for example. Make sure the question type is reasonable to use with a "word cloud", like a simple single line text box.
Enter some sample data.
Ensure the results page is public. (Survey123 website > Collaborate > Share Results > Share to Everyone). A shared Results page may look like this.
I really only want to share the word cloud (with data constantly updated) for questions 2 and 3 in my storymap. The other data are benign in the survey. They just really aren't relevant to the story I want to tell in my storymap. So, how can I show just question two's word cloud?
We can use HTML iframes and some CSS to create a digital cookie cutter of the results page. As I warned you, this is an HTML hack and Esri doesn't support or endorse the approach but it works (today).
Create an HTML file on a web server (with https). I would suggest just copying and pasting this code and tweaking the sample.
Back on your full Survey123 results page, scroll down to the chart you want to display. Set the chart type (e.g. world cloud). Turn off the side bar. Notice each of the changes slightly alters the URL. Copy the URL now displayed and paste it into your HTML file (replacing my sample URL).
Save your new HTML file and get the public URL to your new file.
Create a new storymap and add an "Embed" widget. Paste your new HTML file's URL into the embed widget. Hopefully, you see your word cloud (only) display in the embed widget. Mine is here.
Each Storymap embed widget will need to point to a new HTML file that you create. Each HTML file will need a customized URL from your adjusted Sturvey123 results page.
For more information:
See the sample storymap which includes added explanation, sample code, and links for this build out.
Thanks
This approach was inspired by content original found on StackOverflow.
