Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 22, 2017 23:34
Show Gist options
  • Save anonymous/f4c3ade4d3873f459146baffff657185 to your computer and use it in GitHub Desktop.
Save anonymous/f4c3ade4d3873f459146baffff657185 to your computer and use it in GitHub Desktop.
Download ZIP
NIJ PCJNI Delphi // source http://jsbin.com/micekex
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<script src="delphi-nij.js"> </script>
<link rel="stylesheet" type="text/css" href="delphi-nij.css">
<title>NIJ PCJNI Delphi</title>
<style id="jsbin-css">
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a {
color: #0069d6;
text-align: center;
font-size: 18px;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
text-align: center;
}
h1 {
text-align: center;
}
input {
size: 30px;
color: red;
}
input[type="number"] {
width: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
a[name = "beginRound"] {
display: none;
}
</style>
</head>
<body>
<h1>NIJ PCJNI Delphi</h1>
<p>Round number:
<input type="number" name="roundInput" min="1" value = "1" size = "3" onChange="monitorInput(this.value)"> </p>
<p>
Panel id:
<input type="text" name="panelInput" size = "9" onKeyUP="monitorInput(this.value)">
</p>
<br>
<p>
<a name="beginRound" href="http://www.qualtrics.com"><strong> Begin Round 1</strong></a>
</p>
<script id="jsbin-javascript">
// This script supports some of the page dynamism and customizations for the PCNJI Project Delphi "events."
console.log("Delphi panel script start");
//Load external data:
var surveyData;
// Load JSON without jQuery:
//Source: http://stackoverflow.com/questions/22791721/json-without-jquery
request = new XMLHttpRequest();
//The json file to be loaded should match the group/panel name.
request.open('GET', 'https://output.jsbin.com/tepove.json', true); //****Need _https_ if cross site****
request.onload = function() {
if (request.status >= 200 && request.status < 400){
// Success!
console.log("XMLHttpRequest Success: " + request.status);
//console.log(request.resonseText);
surveyData = JSON.parse(request.responseText);
console.log("Survey Loaded: " + surveyData.SurveyId);
} else {
// We reached our target server, but it returned an error
console.log("XMLHttpRequest Error: " + request.status);
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log("request.onerror called ");
};
request.send();
//URL structure for round 1
var newURL = "https://rand2.co1.qualtrics.com/SE?SID=%s&delphiRound=%s&panelId=%s";
//URL structure for round 2+
var retakeURL = "https://rand2.co1.qualtrics.com/SE?SID=%s&Q_R=%s&delphiRound=%s&panelId=%s";
function interpolate(theString, argumentArray) {
//A sprintf equivalent for Javascript
//http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
var regex = /%s/;
var _r=function(p,c){return p.replace(regex,c);};
return argumentArray.reduce(_r, theString);
}
function monitorInput(value)
{
var roundNum = document.querySelector('[name="roundInput"]').value;
var panelId = document.querySelector('[name="panelInput"]').value.toLowerCase();
var delphiLink = document.querySelector('[name="beginRound"]');
delphiLink.innerHTML = "<strong> Begin Round " + roundNum + "</strong>";
//console.log("Round num: " + roundNum + " Panel Id: " + panelId);
if(panelId in surveyData.panelIds){
var delphiUrl;
if (roundNum === "1") {
//Add the survey, round and panel info to the link.
delphiUrl = interpolate(newURL, [surveyData.SurveyId, roundNum, panelId]);
} else {
//In addition to the above, add the response ID associated with the panel ID.
delphiUrl = interpolate(retakeURL, [surveyData.SurveyId, surveyData.panelIds[value],
roundNum, panelId]);
}
delphiLink.setAttribute('href', delphiUrl);
//debugger;
delphiLink.style.display = 'block'; //show
console.log("Delphi URL: " + delphiUrl);
} else {
delphiLink.style.display = 'none'; //hide
}
// if (delphiLink.style.display === 'none')
}
//Some JSON:
var svData ={"SurveyId":"SV_6kZnET0JqJSxXAF",
panelIds : {
"lion":"R_cYzM4F9DOoqvpHf",
"cat":"R_3OBA3SgpFYlGuUZ",
"leopard":"R_RUERpITFmSRom0F",
"puma":"R_3ITjZxkuxxjEBEN",
"tiger":"R_3iloN2Fq4PDe3r5"
}};
</script>
<script id="jsbin-source-css" type="text/css">h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a {
color: #0069d6;
text-align: center;
font-size: 18px;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
text-align: center;
}
h1 {
text-align: center;
}
input {
size: 30px;
color: red;
}
input[type="number"] {
width: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
a[name = "beginRound"] {
display: none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// This script supports some of the page dynamism and customizations for the PCNJI Project Delphi "events."
console.log("Delphi panel script start");
//Load external data:
var surveyData;
// Load JSON without jQuery:
//Source: http://stackoverflow.com/questions/22791721/json-without-jquery
request = new XMLHttpRequest();
//The json file to be loaded should match the group/panel name.
request.open('GET', 'https://output.jsbin.com/tepove.json', true); //****Need _https_ if cross site****
request.onload = function() {
if (request.status >= 200 && request.status < 400){
// Success!
console.log("XMLHttpRequest Success: " + request.status);
//console.log(request.resonseText);
surveyData = JSON.parse(request.responseText);
console.log("Survey Loaded: " + surveyData.SurveyId);
} else {
// We reached our target server, but it returned an error
console.log("XMLHttpRequest Error: " + request.status);
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log("request.onerror called ");
};
request.send();
//URL structure for round 1
var newURL = "https://rand2.co1.qualtrics.com/SE?SID=%s&delphiRound=%s&panelId=%s";
//URL structure for round 2+
var retakeURL = "https://rand2.co1.qualtrics.com/SE?SID=%s&Q_R=%s&delphiRound=%s&panelId=%s";
function interpolate(theString, argumentArray) {
//A sprintf equivalent for Javascript
//http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
var regex = /%s/;
var _r=function(p,c){return p.replace(regex,c);};
return argumentArray.reduce(_r, theString);
}
function monitorInput(value)
{
var roundNum = document.querySelector('[name="roundInput"]').value;
var panelId = document.querySelector('[name="panelInput"]').value.toLowerCase();
var delphiLink = document.querySelector('[name="beginRound"]');
delphiLink.innerHTML = "<strong> Begin Round " + roundNum + "</strong>";
//console.log("Round num: " + roundNum + " Panel Id: " + panelId);
if(panelId in surveyData.panelIds){
var delphiUrl;
if (roundNum === "1") {
//Add the survey, round and panel info to the link.
delphiUrl = interpolate(newURL, [surveyData.SurveyId, roundNum, panelId]);
} else {
//In addition to the above, add the response ID associated with the panel ID.
delphiUrl = interpolate(retakeURL, [surveyData.SurveyId, surveyData.panelIds[value],
roundNum, panelId]);
}
delphiLink.setAttribute('href', delphiUrl);
//debugger;
delphiLink.style.display = 'block'; //show
console.log("Delphi URL: " + delphiUrl);
} else {
delphiLink.style.display = 'none'; //hide
}
// if (delphiLink.style.display === 'none')
}
//Some JSON:
var svData ={"SurveyId":"SV_6kZnET0JqJSxXAF",
panelIds : {
"lion":"R_cYzM4F9DOoqvpHf",
"cat":"R_3OBA3SgpFYlGuUZ",
"leopard":"R_RUERpITFmSRom0F",
"puma":"R_3ITjZxkuxxjEBEN",
"tiger":"R_3iloN2Fq4PDe3r5"
}};
</script></body>
<!--
ToDo:
- Build the JSON file from the completed survey (e.g., needs to contain surveyID and the panelId/respondentID matchups.)
- Appropriately parse the JSON in the .js so that it does what I want.
- Need to build the survey with an optional set of graphics in the template (and hideable comments for round 2)
- Bonus item: Could also hide "questions" the second time around that have sufficient agreement by CoV! Then, we only need scroll through the questions.
- Try to embed SVG instead of PNG type graphics (use .js to swap out the tag?).
- Another bonus item, see if the SVG or other graphic can place a red vetical line next to the respondent's response (so they can see where they fell).
- In an ideal world, the panelist would just input their "ID" and the system would know if it was round 1 or 2... I'd need to record the Qualtrics survey completion somehow and react to it (using Lambda?)
Desired action:
On the client side, look up the ID in an embedded list (ongoing)
Build a survey link (done)
Then enable it for the user. (done)
Append the round number to the "begin round" link. (TBD)
Append the round number and panel id to the link as query strings. (Done)
Survey ID and Response ID should come from JSON.(TBD)
This page's url will be something like yyy.amazonaws.com/xxx.html
Note: It shouldn't be visible/active until there is a matching round and panel id.
-->
</html>
Raw
jsbin.micekex.css
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a {
color: #0069d6;
text-align: center;
font-size: 18px;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
text-align: center;
}
h1 {
text-align: center;
}
input {
size: 30px;
color: red;
}
input[type="number"] {
width: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
a[name = "beginRound"] {
display: none;
}
Raw
jsbin.micekex.js
// This script supports some of the page dynamism and customizations for the PCNJI Project Delphi "events."
console.log("Delphi panel script start");
//Load external data:
var surveyData;
// Load JSON without jQuery:
//Source: http://stackoverflow.com/questions/22791721/json-without-jquery
request = new XMLHttpRequest();
//The json file to be loaded should match the group/panel name.
request.open('GET', 'https://output.jsbin.com/tepove.json', true); //****Need _https_ if cross site****
request.onload = function() {
if (request.status >= 200 && request.status < 400){
// Success!
console.log("XMLHttpRequest Success: " + request.status);
//console.log(request.resonseText);
surveyData = JSON.parse(request.responseText);
console.log("Survey Loaded: " + surveyData.SurveyId);
} else {
// We reached our target server, but it returned an error
console.log("XMLHttpRequest Error: " + request.status);
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log("request.onerror called ");
};
request.send();
//URL structure for round 1
var newURL = "https://rand2.co1.qualtrics.com/SE?SID=%s&delphiRound=%s&panelId=%s";
//URL structure for round 2+
var retakeURL = "https://rand2.co1.qualtrics.com/SE?SID=%s&Q_R=%s&delphiRound=%s&panelId=%s";
function interpolate(theString, argumentArray) {
//A sprintf equivalent for Javascript
//http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
var regex = /%s/;
var _r=function(p,c){return p.replace(regex,c);};
return argumentArray.reduce(_r, theString);
}
function monitorInput(value)
{
var roundNum = document.querySelector('[name="roundInput"]').value;
var panelId = document.querySelector('[name="panelInput"]').value.toLowerCase();
var delphiLink = document.querySelector('[name="beginRound"]');
delphiLink.innerHTML = "<strong> Begin Round " + roundNum + "</strong>";
//console.log("Round num: " + roundNum + " Panel Id: " + panelId);
if(panelId in surveyData.panelIds){
var delphiUrl;
if (roundNum === "1") {
//Add the survey, round and panel info to the link.
delphiUrl = interpolate(newURL, [surveyData.SurveyId, roundNum, panelId]);
} else {
//In addition to the above, add the response ID associated with the panel ID.
delphiUrl = interpolate(retakeURL, [surveyData.SurveyId, surveyData.panelIds[value],
roundNum, panelId]);
}
delphiLink.setAttribute('href', delphiUrl);
//debugger;
delphiLink.style.display = 'block'; //show
console.log("Delphi URL: " + delphiUrl);
} else {
delphiLink.style.display = 'none'; //hide
}
// if (delphiLink.style.display === 'none')
}
//Some JSON:
var svData ={"SurveyId":"SV_6kZnET0JqJSxXAF",
panelIds : {
"lion":"R_cYzM4F9DOoqvpHf",
"cat":"R_3OBA3SgpFYlGuUZ",
"leopard":"R_RUERpITFmSRom0F",
"puma":"R_3ITjZxkuxxjEBEN",
"tiger":"R_3iloN2Fq4PDe3r5"
}};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment