Skip to content

Instantly share code, notes, and snippets.

@tbaggaley
Last active November 23, 2020 16:08
Show Gist options
  • Save tbaggaley/fb4d30c5fa26e0ff3e5aba98cf09111f to your computer and use it in GitHub Desktop.
Save tbaggaley/fb4d30c5fa26e0ff3e5aba98cf09111f to your computer and use it in GitHub Desktop.
Import a survey bookmarklet
// Import a survey bookmarklet
// 1. Create a new bookmark (e.g. with title "Import survey") with the following as the URL:
// javascript:(function()%7Bdocument.write(%60%0A%3Ch1%3ESurvey%20import%20tool%3C%2Fh1%3E%0A%3Ch3%3E%201.%20Enter%20URL%20to%20the%20questionnaire%20you'd%20like%20to%20import%3A%20%3C%2Fh3%3E%0A%3Cinput%20type%3D%22text%22%20id%3D%22url%22%20style%3D%22width%3A%2033%25%22%3E%0A%3Ch3%3E%202.%20Open%20the%20following%20URL%20and%20copy%20the%20contents%20to%20your%20clipboard%3A%20%3C%2Fh3%3E%0A%3Cspan%20id%3D%22exportURL%22%3E%20Enter%20a%20questionnaire%20URL%20above%20to%20see%20the%20export%20URL%20%3C%2Fspan%3E%0A%3Ch3%3E%203.%20Paste%20the%20contents%20in%20the%20box%20below%20%3C%2Fh3%3E%0A%3Ctextarea%20id%3D'schema'%20style%3D'width%3A50%25%3B%20height%3A33%25'%3E%3C%2Ftextarea%3E%0A%3Ch3%3E%204.%20Hit%20the%20button%20to%20import%20the%20survey%20and%20open%20it%20for%20viewing%20%3C%2Fh3%3E%0A%3Cbutton%20id%3D%22importButton%22%3EImport%20survey%3C%2Fbutton%3E%0A%60)%3B%0A%0Adocument.body.style%20%3D%20%22text-align%3A%20center%3B%20font-family%3A%20sans-serif%3B%22%3B%0A%0Adocument.getElementById(%22url%22).oninput%20%3D%20e%20%3D%3E%20%7B%0A%20%20%20%20const%20exportURLelem%20%3D%20document.getElementById(%22exportURL%22)%3B%0A%20%20%20%20const%20matches%20%3D%20e.target.value.match(%2F%5E(.%2B)%5C%2F.%2Bq%5C%2F(.%2B%3F)%5C%2F%2F)%3B%0A%20%20%20%20if(matches.length%20%3C%203)%0A%20%20%20%20%20%20%20%20exportURLelem.innerText%20%3D%20%22Enter%20a%20questionnaire%20URL%20above%20to%20see%20the%20export%20URL%22%3B%0A%20%20%20%20else%0A%20%20%20%20%20%20%20%20exportURLelem.innerHTML%20%3D%20%60%3Ca%20href%3D%22%24%7Bmatches%5B1%5D%7D%2Fexport%2F%24%7Bmatches%5B2%5D%7D%22%20target%3D%22_blank%22%3E%20Click%20here%20to%20view%20Author%20schema%20JSON%20%3C%2Fa%3E%60%3B%0A%7D%3B%0A%0Adocument.getElementById(%22importButton%22).onclick%20%3D%20async%20()%20%3D%3E%20%7B%0A%20%20%20%20const%20schema%20%3D%20document.getElementById(%22schema%22).value.trim()%3B%0A%20%20%20%20if(!schema)%20return%3B%0A%0A%20%20%20%20const%20host%20%3D%20window.location.host%3B%0A%20%20%20%20const%20addr%20%3D%20(host.startsWith(%22localhost%22)%20%3F%20%22http%3A%2F%2Flocalhost%3A4000%22%20%3A%20%60https%3A%2F%2F%24%7Bhost%7D%60)%20%2B%20%22%2Fimport%22%3B%0A%0A%20%20%20%20const%20result%20%3D%20await%20fetch(addr%2C%20%7B%0A%20%20%20%20%20%20%20%20method%3A%20%22POST%22%2C%0A%20%20%20%20%20%20%20%20headers%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Content-Type%22%3A%20%22application%2Fjson%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Authorization%22%3A%20%22Bearer%20%22%20%2B%20localStorage.accessToken%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20body%3A%20document.getElementById(%22schema%22).value.trim()%2C%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20const%20json%20%3D%20await%20result.json()%3B%0A%0A%20%20%20%20if(json.id)%0A%20%20%20%20%20%20%20%20window.location%20%3D%20%60%2Fgo%23%2Fq%2F%24%7Bjson.id%7D%60%3B%0A%20%20%20%20else%0A%20%20%20%20%20%20%20%20alert(%22Unable%20to%20add%20survey%20-%20check%20the%20JSON%20is%20valid%22)%3B%0A%7D%3B%0A%7D)()
// 2. Visit staging or locally hosted Author (works for either) and make sure you're logged in
// 3. Open the bookmark (could make it into button on bookmark bar - but will work from bookmarks menu too)
// It will run through the survey import process, import the survey & visit it in the browser
// No more need to copy auth credentials or use postman!
// The code which the above was generated from is below:
document.write(`
<h1>Survey import tool</h1>
<h3> 1. Enter URL to the questionnaire you'd like to import: </h3>
<input type="text" id="url" style="width: 33%">
<h3> 2. Open the following URL and copy the contents to your clipboard: </h3>
<span id="exportURL"> Enter a questionnaire URL above to see the export URL </span>
<h3> 3. Paste the contents in the box below </h3>
<textarea id='schema' style='width:50%; height:33%'></textarea>
<h3> 4. Hit the button to import the survey and open it for viewing </h3>
<button id="importButton">Import survey</button>
`);
document.body.style = "text-align: center; font-family: sans-serif;";
document.getElementById("url").oninput = e => {
const exportURLelem = document.getElementById("exportURL");
const matches = e.target.value.match(/^(.+)\/.+q\/(.+?)\//);
if(matches.length < 3)
exportURLelem.innerText = "Enter a questionnaire URL above to see the export URL";
else
exportURLelem.innerHTML = `<a href="${matches[1]}/export/${matches[2]}" target="_blank"> Click here to view Author schema JSON </a>`;
};
document.getElementById("importButton").onclick = async () => {
const schema = document.getElementById("schema").value.trim();
if(!schema) return;
const host = window.location.host;
const addr = (host.startsWith("localhost") ? "http://localhost:4000" : `https://${host}`) + "/import";
const result = await fetch(addr, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.accessToken
},
body: document.getElementById("schema").value.trim(),
});
const json = await result.json();
if(json.id)
window.location = `/go#/q/${json.id}`;
else
alert("Unable to add survey - check the JSON is valid");
};
@tbaggaley
Copy link
Author

Once the bookmarklet is activated the UI will appear as shown here:
Screenshot 2020-11-19 at 09 24 44

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment