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>
<head>
<script src="static/socket.io.min.js"></script>
<script>
var socket;
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>
<link href="/static/survey.css" rel="stylesheet">
<input id="question" class="hidden" value="{{ question }}">
</head>
<body>
<div>
Prompt:<br/>
<div id="prompt-container">
<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,
</div>
<br/>
<div>
<h1><center>{{ question }}</center></h1>
</div>
<h1 id="question">{{ question }}</h1>
<input type=hidden id="id" value="{{ random_num }}"/>
<table border=1>
<tr>
<td>
<input type=radio autocomplete="off" name="answer" id="A" onclick="send_results();">
</td>
<td>
{{ a }}
</td>
</tr>
<tr>
<td>
<input type=radio autocomplete="off" name="answer" id="B" onclick="send_results();">
</td>
<td>
{{ b }}
</td>
</tr>
<tr>
<td colspan=2>&nbsp;</td>
</tr>
<tr>
<td>
<input type=radio autocomplete="off" name="answer" id="C" onclick="send_results();">
</td>
<td>
About the same
</td>
</tr>
<tr>
<td>
<input type=radio autocomplete="off" name="answer" id="D" onclick="send_results();">
</td>
<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>
<div id="choices-container">
<div answer="A" class="choice">
<input type="radio" name="answer">
<span class="choice-text">{{ a }}</span>
</div>
<div answer="B" class="choice">
<input type="radio" name="answer">
<span class="choice-text">{{ b }}</span>
</div>
<div answer="C" class="choice meta-choice">
<input type="radio" name="answer">
<span class="choice-text">Both choices are about the same</span>
</div>
<div answer="D" class="choice meta-choice">
<input type="radio" name="answer">
<span class="choice-text">The first choice is incoherent</span>
</div>
<div answer="E" class="choice meta-choice">
<input type="radio" name="answer">
<span class="choice-text">The second choice is incoherent</span>
</div>
<div answer="F" class="choice meta-choice">
<input type="radio" name="answer">
<span class="choice-text">Both choices are incoherent</span>
</div>
</div>
<script src="/static/survey.js"></script>
</body>
</html>