rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

More survey styling

Browse Source
This commit is contained in:
somebody
2022-12-14 18:27:43 -06:00
parent 8dba339155
commit bba8cc7344
3 changed files with 124 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
static/survey.css Normal file
View File

@@ -0,0 +1,59 @@
:root {
--card-radius: 6px;
}
body {
color: white;
background-color: #111820;
font-family: Arial, Helvetica, sans-serif
}
.hidden {
display: none;
}
#prompt-container {
border: 2px solid #36485e;
border-radius: 8px;
background-color: #273141;
padding: 5px;
padding-top: 1.5em;
}
#prompt-container>.loopy-label {
position: absolute;
top: 0em;
background-color: #273141;
padding: 0px 3px;
border-top: 2px solid #36485e;
}
#question {
text-align: center;
}
.choice {
font-size: 1.2em;
background-color: #273141;
padding: 10px 5px;
margin-bottom: 3px;
cursor: pointer;
}
.meta-choice {
font-style: italic;
}
.meta-choice>.choice-text {
opacity: 0.5;
}
.choice:first-child {
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
}
.choice:last-child {
border-bottom-left-radius: var(--card-radius);
border-bottom-right-radius: var(--card-radius);
}

25
static/survey.js Normal file
View File

@@ -0,0 +1,25 @@
function $el(selector) { return document.querySelector(selector) }
var socket = io.connect(window.location.origin, { transports: ['polling', 'websocket'], closeOnBeforeunload: false });
var question = $el("#question").value;
function send_results() {
var answer = "";
for (const answerId of ["A", "B", "C", "D", "E", "F"]) {
let checkbox = document.querySelector(`[answer="${answerId}"]`).querySelector("input");
if (checkbox.checked) {
answer = answerId;
break;
}
}
console.log(answer);
socket.emit("answer", { "question": question, "answer": answer, "id": document.getElementById("id").value });
}
for (const child of $el("#choices-container").children) {
let radioButton = child.querySelector("input");
child.addEventListener("click", function () { radioButton.click() });
radioButton.addEventListener("click", send_results);
}

122
templates/survey.html
View File

@@ -2,93 +2,51 @@
<html> <html>
<head> <head>
<script src="static/socket.io.min.js"></script> <script src="static/socket.io.min.js"></script>
<script> <link href="/static/survey.css" rel="stylesheet">
var socket; <input id="question" class="hidden" value="{{ question }}">
socket = io.connect(window.location.origin, {transports: ['polling', 'websocket'], closeOnBeforeunload: false});
function send_results() {
var answer = "";
if (document.getElementById("A").checked) {
var answer = "A";
} else if (document.getElementById("B").checked) {
var answer = "B";
} else if (document.getElementById("C").checked) {
var answer = "C";
} else if (document.getElementById("D").checked) {
var answer = "D";
} else if (document.getElementById("E").checked) {
var answer = "E";
} else if (document.getElementById("E").checked) {
var answer = "F";
}
console.log(answer);
socket.emit("answer", {"question": "{{ question }}", "answer": answer, "id": document.getElementById("id").value});
}
</script>
</head> </head>
<body> <body>
<div> <div id="prompt-container">
Prompt:<br/> <span class="loopy-label">Prompt</span>
Niko the kobold stalked carefully down the alley, his small scaly figure obscured by a dusky cloak that fluttered lightly in the cold winter breeze. Holding up his tail to keep it from dragging in the dirty snow that covered the cobblestone, he waited patiently for the butcher to turn his attention from his stall so that he could pilfer his next meal: a tender-looking chicken. He crouched just slightly as he neared the stall to ensure that no one was watching, not that anyone would be dumb enough to hassle a small kobold. What else was there for a lowly kobold to do in a city? All that Niko needed to know was where to find the chicken and then how to make off with it. A soft thud caused Niko to quickly lift his head. Standing behind the stall where the butcher had been cutting his chicken, Niko the kobold stalked carefully down the alley, his small scaly figure obscured by a dusky cloak that fluttered lightly in the cold winter breeze. Holding up his tail to keep it from dragging in the dirty snow that covered the cobblestone, he waited patiently for the butcher to turn his attention from his stall so that he could pilfer his next meal: a tender-looking chicken. He crouched just slightly as he neared the stall to ensure that no one was watching, not that anyone would be dumb enough to hassle a small kobold. What else was there for a lowly kobold to do in a city? All that Niko needed to know was where to find the chicken and then how to make off with it. A soft thud caused Niko to quickly lift his head. Standing behind the stall where the butcher had been cutting his chicken,
</div> </div>
<br/>
<div> <h1 id="question">{{ question }}</h1>
<h1><center>{{ question }}</center></h1>
</div>
<input type=hidden id="id" value="{{ random_num }}"/> <input type=hidden id="id" value="{{ random_num }}"/>
<table border=1>
<tr> <div id="choices-container">
<td> <div answer="A" class="choice">
<input type=radio autocomplete="off" name="answer" id="A" onclick="send_results();"> <input type="radio" name="answer">
</td> <span class="choice-text">{{ a }}</span>
<td> </div>
{{ a }}
</td> <div answer="B" class="choice">
</tr> <input type="radio" name="answer">
<tr> <span class="choice-text">{{ b }}</span>
<td> </div>
<input type=radio autocomplete="off" name="answer" id="B" onclick="send_results();">
</td> <div answer="C" class="choice meta-choice">
<td> <input type="radio" name="answer">
{{ b }} <span class="choice-text">Both choices are about the same</span>
</td> </div>
</tr>
<tr> <div answer="D" class="choice meta-choice">
<td colspan=2>&nbsp;</td> <input type="radio" name="answer">
</tr> <span class="choice-text">The first choice is incoherent</span>
<tr> </div>
<td>
<input type=radio autocomplete="off" name="answer" id="C" onclick="send_results();"> <div answer="E" class="choice meta-choice">
</td> <input type="radio" name="answer">
<td> <span class="choice-text">The second choice is incoherent</span>
About the same </div>
</td>
</tr> <div answer="F" class="choice meta-choice">
<tr> <input type="radio" name="answer">
<td> <span class="choice-text">Both choices are incoherent</span>
<input type=radio autocomplete="off" name="answer" id="D" onclick="send_results();"> </div>
</td> </div>
<td>
The first is incoherent
</td>
</tr>
<tr>
<td>
<input type=radio autocomplete="off" name="answer" id="E" onclick="send_results();">
</td>
<td>
The second is incoherent
</td>
</tr>
<tr>
<td>
<input type=radio autocomplete="off" name="answer" id="F" onclick="send_results();">
</td>
<td>
Both the first and second are incoherent
</td>
</tr>
</table>
<script src="/static/survey.js"></script>
</body> </body>
</html> </html>