Skip to content

Commit

Permalink
handle forid array response case, update timing in renderer (#13)
Browse files Browse the repository at this point in the history 
* handle forid array response case, update timing in renderer

* fix scroll behavior
  • Loading branch information
@JoeArmani
JoeArmani authored Dec 20, 2024
1 parent 45e8479 commit 6f6cac8
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 157 deletions.
249 changes: 134 additions & 115 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,61 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-BY+fdrpOd3gfeRvTSMT+VUZmA728cfF9Z2G42xpaRkUGu2i3DyzpTURDo5A6CaLK" crossorigin="anonymous">

<!-- Custom CSS -->
<link id="pagestyle" href="Default.css" rel="stylesheet" type="text/css">
<link id="pagelogic" href="Default.css" rel="stylesheet" type="text/css">
<link href="Quest.css" rel="stylesheet" type="text/css">
<script src="main.js" type="module"></script>
<script src="buildGrid.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>
<title>Quest</title>
</head>
<body class="w-100">
<nav id="questNavbar" class="navbar navbar-expand-sm quest-bg-gradient" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand text-baskerville" href="#">Quest</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#questNavContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#questNavContent" aria-controls="questNavContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="questNavContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-bs-toggle="offcanvas" href="#settings">Settings</a>
<a class="nav-link" data-bs-toggle="offcanvas" href="#settings"
aria-controls="settings">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/episphere/quest-dev" target="_blank">Source</a>
<a class="nav-link" href="https://github.com/episphere/quest-dev" target="_blank"
rel="noopener noreferrer">Source</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/episphere/quest/wiki" target="_blank">Wiki</a>
<a class="nav-link" href="https://github.com/episphere/quest/wiki" target="_blank"
rel="noopener noreferrer">Wiki</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/episphere/quest-dev/issues" target="_blank">Issues</a>
<a class="nav-link" href="https://github.com/episphere/quest-dev/issues" target="_blank"
rel="noopener noreferrer">Issues</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://gitter.im/episphere/quest" target="_blank">Talk to us</a>
<a class="nav-link" href="https://gitter.im/episphere/quest" target="_blank"
rel="noopener noreferrer">Talk to us</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="offcanvas" href="#cache" role="button" id="viewCurrentResponses">View Current Responses</a>
<a class="nav-link" data-bs-toggle="offcanvas" href="#cache" role="button"
id="viewCurrentResponses" aria-controls="cache">View Current Responses</a>
</li>
<li class="nav-item">
<a class="nav-link" id="Reference" href="https://doi.org/10.1186/s12911-023-02338-6" target="_blank">Paper</a>
<a class="nav-link" id="Reference" href="https://doi.org/10.1186/s12911-023-02338-6"
target="_blank" rel="noopener noreferrer">Paper</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="offcanvas" href="#helpOC" role="button">Help</a>
<a class="nav-link" data-bs-toggle="offcanvas" href="#helpOC" role="button"
aria-controls="helpOC">Help</a>
</li>
</ul>
</div>
Expand All @@ -56,25 +66,25 @@
<div class="container-fluid" id="tool">
<div class="offcanvas offcanvas-start" tabindex="-1" id="settings" aria-labelledby="settingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="settingLabel">Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<h5 class="offcanvas-title" id="settingLabel">Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="d-flex flex-wrap">
<form class="form border flex-grow-1 p-1 d-flex flex-column">
<h3>Questionnaire Options</h3>
<div>
<label for="url" class="form-label">Module URL </label>
<label for="url" class="form-label">Module URL</label>
<div class="input-group mb-3">
<input id="url" class="form-control" aria-label="url" onchange="submitURL()">
<input type="button" aria-label="submit" value="Load" onclick="submitURL()"></input>
<input id="url" class="form-control" aria-label="url">
<button type="button" class="btn btn-outline-secondary" id="loadURLBtn" aria-label="Load URL">Load</button>
</div>

<label for="tb" class="form-label">Save Module</label>
<div class="input-group mb-3">
<input id="tb" class="form-control" aria-label="File Name" style="margin-top: 10px;">
<button type="button" class="btn">.txt</button>
<button aria-label="Save" onclick="saveDoc()">Save</button>
<button type="button" class="btn btn-outline-secondary" id="saveBtn" aria-label="Save">Save</button>
</div>
</div>
<div>
Expand All @@ -86,7 +96,7 @@ <h3>Questionnaire Options</h3>
<div>
<label class="form-check form-switch mt-2">
Activate Logic
<input class="form-check-input" type="checkbox" role="switch" id="logic" data-sheet-on="ActiveLogic.css" data-sheet-off="Default.css">
<input class="form-check-input" type="checkbox" role="switch" id="logic" data-sheet-on="ActiveLogic.css" data-sheet-off="Default.css">
</label>
</div>
<div>
Expand All @@ -100,7 +110,7 @@ <h3>Questionnaire Options</h3>
<div class="input-group mb-3">
<select id="langSelect" class="form-select" aria-label="quest-locale">
<option value="en" selected>en-US</option>
<option value="es">en-MX</option>
<option value="es">en-MX</option>
</select>
</div>
</div>
Expand All @@ -110,23 +120,28 @@ <h3>Questionnaire Options</h3>
<h3>Previous Results</h3>
<textarea id="jsonInput" aria-label="json input" style="width: 100%; height:150px"></textarea>
<div class="col" style="margin-top: 10px;">
<input type="button" id="updater" value="add JSON to memory"/>
<input type="button" id="clearMem" value="Clear Memory"/>
<button type="button" id="updater" class="btn btn-outline-secondary">Add JSON to
Memory</button>
<button type="button" id="clearMem" class="btn btn-outline-danger">Clear Memory</button>
<div id="loadDisplay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6" id="markup">
<div class="d-flex flex-wrap justify-content-between">
<span class="me-1 h4">Markup</span>
<div class="d-flex align-items-end">
<span class="me-1 h5">(<a href="https://raw.githubusercontent.com/episphere/quest/main/questionnaires/demo.txt" id="demo">Demo</a>)</span>
<label for="buttonFlex" id="fontSpan" class=" me-1 h5">Change Font Size </label>
<button id="increaseSizeButton" aria-label="increaseSize" class="me-1 h4">&CirclePlus;</button>
<button id="decreaseSizeButton" aria-label="decreaseSize" class="me-1 h4">&CircleMinus;</button>
<div class="d-flex flex-wrap justify-content-between align-items-end">
<span class="me-1 h4">Markup</span>
<div class="d-flex align-items-center">
<span class="me-1 h5">(<a
href="https://raw.githubusercontent.com/episphere/quest/main/questionnaires/demo.txt"
id="demo">Demo</a>)</span>
<label for="fontSpan" id="fontSpan" class="me-1 h5">Change Font Size</label>
<button type="button" id="increaseSizeButton" aria-label="Increase Font Size"
class="btn btn-sm btn-outline-primary me-1">+</button>
<button type="button" id="decreaseSizeButton" aria-label="Decrease Font Size"
class="btn btn-sm btn-outline-primary">-</button>
</div>
</div>
<textarea class="form-control" id="markupTextArea" placeholder="type, paste, or upload questionnaire markup"></textarea>
Expand All @@ -145,10 +160,10 @@ <h5 class="offcanvas-title" id="helpOCLabel">Help</h5>
<div class="offcanvas-body">
<div class="card">
<div class="card-body">
<h5 class="card-title">How do I load a module from a URL</h5>
<p class="card-text">The questionnaire module load/save features were
hidden to save space on the screen. Click "settings" in the menu and
type the URL in the <i>Module URL</i> box.
<h5 class="card-title">How do I load a module from a URL?</h5>
<p class="card-text">
The questionnaire module load/save features were hidden to save space on the screen.
Click "settings" in the menu and type the URL in the <i>Module URL</i> box.
</p>
</div>
</div>
Expand All @@ -163,92 +178,96 @@ <h5 class="offcanvas-title" id="cacheLabel">Current Responses</h5>
<table class="table table-striped" id="currentResponsesTable"></table>
</div>
</div>
</body>
<script>
function changeStyle(sheet) {
document.getElementById("pagestyle").setAttribute("href", sheet)
}
function changeLogic(sheet) {
document.getElementById("pagelogic").setAttribute("href", sheet)
}
</script>


<script>
function goToLink() {
let a = document.createElement('a')
a.href = "https://github.com/episphere/quest/upload/master/questionnaires"
a.target = "_blank"
a.click()
}
document.getElementById("demo").addEventListener("click", (event) => {
event.preventDefault();
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js" defer></script>
<script src="main.js" type="module"></script>
<script src="buildGrid.js" type="module"></script>
<script src="quest.js" type="module"></script>

const demoUrl = document.getElementById("demo").href;

let newUrl = new URL(window.location.href);
newUrl.searchParams.set('url', demoUrl);
window.location.href = newUrl.toString();
})
</script>
<script>
function saveDoc() {
let bb = new Blob([markupTextArea.value])
let url = URL.createObjectURL(bb);
let a = document.createElement('a');
a.href = url;
let tb = document.getElementById('tb')
if (tb.value == 0) { tb.value = "demo" }
a.download = tb.value;
a.click() // then download it automatically
return a
}
</script>
<script>
function submitURL() {
let url = document.getElementById("url").value
let newUrl = new URL(window.location.href);
newUrl.searchParams.set('url', url);
window.location.href = newUrl.toString();
}
</script>
<script>
function onFileSelected(event) {
let file = event.target.files[0]
let reader = new FileReader()
reader.onload = function (event) {
let markupTextArea = document.getElementById("markupTextArea")
markupTextArea.value = event.target.result
markupTextArea.onkeyup()
<script>
function changeStyle(sheet) {
document.getElementById("pagestyle").setAttribute("href", sheet)
}
reader.readAsText(file)
function changeLogic(sheet) {
document.getElementById("pagelogic").setAttribute("href", sheet)
}
</script>

}
</script>
<script>
let searchParams = new URLSearchParams(location.search)
if (location.hash.split('&').includes('run') || searchParams.has('run')) {
document.getElementById('logic').checked=true;
changeLogic("ActiveLogic.css");
document.getElementById('questNavbar').style.display = 'none';
document.getElementById('markup').style.display = 'none';
document.getElementById('renderText').style.display = 'none';
}
let styleRegex = /^style=([^&\s]+)/
let styleIndx = location.hash.split("&").findIndex((x) => styleRegex.exec(x))
if (styleIndx > -1) {
let styleSheet = location.hash.split("&")[styleIndx].match(styleRegex)[1]
console.log(styleSheet)
changeStyle(styleSheet)
} else if (searchParams.has('style')) {
changeStyle(searchParams.get('style'))
}

let myTree = {};
<script>
function goToLink() {
let a = document.createElement('a')
a.href = "https://github.com/episphere/quest/upload/master/questionnaires"
a.target = "_blank"
a.click()
}
document.getElementById("demo").addEventListener("click", (event) => {
event.preventDefault();

const demoUrl = document.getElementById("demo").href;

let newUrl = new URL(window.location.href);
newUrl.searchParams.set('url', demoUrl);
window.location.href = newUrl.toString();
})
</script>
<script>
function saveDoc() {
let bb = new Blob([markupTextArea.value])
let url = URL.createObjectURL(bb);
let a = document.createElement('a');
a.href = url;
let tb = document.getElementById('tb')
if (!tb.value?.trim()) { tb.value = "demo" }
a.download = tb.value;
a.click() // then download it automatically
return a
}
</script>
<script>
function submitURL() {
let url = document.getElementById("url").value
let newUrl = new URL(window.location.href);
newUrl.searchParams.set('url', url);
window.location.href = newUrl.toString();
}
</script>
<script>
function onFileSelected(event) {
let file = event.target.files[0]
let reader = new FileReader()
reader.onload = function (event) {
let markupTextArea = document.getElementById("markupTextArea")
markupTextArea.value = event.target.result
markupTextArea.onkeyup()
}
reader.readAsText(file)

</script>
}
</script>
<script>
let searchParams = new URLSearchParams(location.search)
if (location.hash.split('&').includes('run') || searchParams.has('run')) {
document.getElementById('logic').checked=true;
changeLogic("ActiveLogic.css");
document.getElementById('questNavbar').style.display = 'none';
document.getElementById('markup').style.display = 'none';
document.getElementById('renderText').style.display = 'none';
}
let styleRegex = /^style=([^&\s]+)/
let styleIndx = location.hash.split("&").findIndex((x) => styleRegex.exec(x))
if (styleIndx > -1) {
let styleSheet = location.hash.split("&")[styleIndx].match(styleRegex)[1]
console.log(styleSheet)
changeStyle(styleSheet)
} else if (searchParams.has('style')) {
changeStyle(searchParams.get('style'))
}

<script src="quest.js" type="module"></script>

</script>
</body>
</html>
Loading

0 comments on commit 6f6cac8

Please sign in to comment.