Skip to content

render settings and assessment #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mloginov wants to merge 2 commits into
base: master
Choose a base branch
from
Open

render settings and assessment #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8bb514b
settings WIP(html skeleton)
mloginov May 13, 2026
4c8e35a
settings visibility management
mloginov May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"name": "Advanced Code Test",
"type": "assessment",
"properties": {
"type": "test",
"icon": "./icon.svg",
"defaultHeight": 500,
"gradingControls": {
"points": true,
"allowPartialPoints": true,
"useMaximumScore": true,
"definedNumberOfAttempts": true,
"rationale": true
}
}
}
13 changes: 13 additions & 0 deletions settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.settings-content-row-container {
display: flex;
flex-direction: row;
gap: 10px;
}

.test-case-controls-container {
align-items: end;
}

.test-case-add-case-container {
flex: 1;
}
164 changes: 164 additions & 0 deletions settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Settings</title>
<link type="text/css" rel="stylesheet" href="../assessment-common/settings.css">
<link rel="stylesheet" href="./settings.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/cash/8.1.5/cash.min.js"></script>
<script type="text/javascript" src="../assessment-common/helper.js"></script>
<script type="text/javascript" src="./settings.js"></script>
</head>
<body>
<div id="settings-content" class="codio-assessment-settings-content">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container">
<label for="instructions" class="codio-assessment-settings-form-label">Instructions</label>
<textarea id="instructions" name="instructions" rows="4" class="codio-assessment-settings-form-input"></textarea>
</div>
<div class="settings-content-row-container">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container">
<label for="languageType" class="codio-assessment-settings-form-label">Language type</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="languageType" class="codio-assessment-settings-form-select">
<option value="custom">Custom</option>
<option value="ruby">Ruby</option>
<option value="java">Java</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
</select>
</div>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="timeout" class="codio-assessment-settings-form-label">Timeout</label>
<input id="timeout" name="timeout" class="codio-assessment-settings-form-input" type="number"/>
</div>
</div>
<div class="language-settings-container custom-container hide">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container">
<label for="customCommand" class="codio-assessment-settings-form-label">Command</label>
<input id="customCommand" name="customCommand" class="codio-assessment-settings-form-input"/>
</div>
</div>
<div class="language-settings-container ruby-container hide">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container lang-subtype-container">
<label for="rubyLangSubtype" class="codio-assessment-settings-form-label">Language assessment subtype</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="rubyLangSubtype" class="lang-subtype-select codio-assessment-settings-form-select">
<option value="style">Rubocop (style)</option>
<option value="rspec">RSpec (tests)</option>
</select>
</div>
</div>
</div>
<div class="language-settings-container java-container hide">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container lang-subtype-container">
<label for="javaLangSubtype" class="codio-assessment-settings-form-label">Language assessment subtype</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="javaLangSubtype" class="lang-subtype-select codio-assessment-settings-form-select">
<option value="style">CheckStyle</option>
<option value="junit">JUnit (tests)</option>
</select>
</div>
</div>
<div class="lang-subtype-settings-container lang-subtype-java-style-settings settings-content-row-container hide">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="javaStyleConfigPath" class="codio-assessment-settings-form-label">Config path</label>
<input id="javaStyleConfigPath" name="javaStyleConfigPath" class="codio-assessment-settings-form-input"/>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container lang-subtype-container">
<label for="javaCheckStyleVersion" class="codio-assessment-settings-form-label">CheckStyle version</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="javaCheckStyleVersion" class="codio-assessment-settings-form-select">
<option value="10.12">Checkstyle v10.12(JRE 11 and above)</option>
<option value="8.24" selected="">Checkstyle v8.24(JRE 8 and above)</option>
<option value="8.9">Checkstyle v8.9(JRE 8)</option>
<option value="6.6">Checkstyle v6.6(JRE 6 and 7)</option>
</select>
</div>
</div>
</div>
<div class="lang-subtype-settings-container lang-subtype-java-junit-settings hide">
<div class="settings-content-row-container">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container lang-subtype-container">
<label for="javaJunitVersion" class="codio-assessment-settings-form-label">JUnit version</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="javaJunitVersion" class="codio-assessment-settings-form-select">
<option value="5.10.0">JUnit5 v5.10.0</option>
<option value="5">JUnit5 v5.6.1</option>
<option value="4.13.2">JUnit4 v4.13.2</option>
<option value="4" selected="">JUnit4 v4.12</option>
</select>
</div>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="javaJunitSourcePath" class="codio-assessment-settings-form-label">JUnit source path</label>
<input id="javaJunitSourcePath" name="javaJunitSourcePath" class="codio-assessment-settings-form-input"/>
</div>
</div>
<div class="settings-content-row-container">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="javaJunitTestsSourcePath" class="codio-assessment-settings-form-label">Tests source path</label>
<input id="javaJunitTestsSourcePath" name="junitTestsSourcePath" class="codio-assessment-settings-form-input"/>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="javaJunitLibraryPath" class="codio-assessment-settings-form-label">Library path</label>
<input id="javaJunitLibraryPath" name="javaJunitLibraryPath" class="codio-assessment-settings-form-input"/>
</div>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container">
<label for="javaJunitWorkingDirectory" class="codio-assessment-settings-form-label">Working directory</label>
<input id="javaJunitWorkingDirectory" name="javaJunitWorkingDirectory" class="codio-assessment-settings-form-input"/>
</div>
</div>
</div>
<div class="language-settings-container python-container hide">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container lang-subtype-container">
<label for="pythonLangSubtype" class="codio-assessment-settings-form-label">Language assessment subtype</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="pythonLangSubtype" class="lang-subtype-select codio-assessment-settings-form-select">
<option value="style">PyCodeStyle</option>
<option value="unittest">UnitTest</option>
</select>
</div>
</div>
<div class="lang-subtype-settings-container lang-subtype-python-unittest-settings hide">
<div class="settings-content-row-container">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="pythonUnittestExecutable" class="codio-assessment-settings-form-label">Python executable</label>
<input id="pythonUnittestExecutable" name="pythonUnittestExecutable" class="codio-assessment-settings-form-input"/>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container codio-assessment-settings-form-control--fillWidth">
<label for="pythonUnittestWorkingDirectory" class="codio-assessment-settings-form-label">Python working directory</label>
<input id="pythonUnittestWorkingDirectory" name="pythonUnittestWorkingDirectory" class="codio-assessment-settings-form-input"/>
</div>
</div>
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container">
<label for="pythonUnittestStudentFolder" class="codio-assessment-settings-form-label">Student folder</label>
<input id="pythonUnittestStudentFolder" name="pythonUnittestStudentFolder" class="codio-assessment-settings-form-input"/>
</div>
</div>
</div>
<div class="language-settings-container javascript-container hide">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-select-container lang-subtype-container">
<label for="javascriptLangSubtype" class="codio-assessment-settings-form-label">Language assessment subtype</label>
<div class="codio-assessment-settings-form-select-wrapper">
<select id="javascriptLangSubtype" class="lang-subtype-select codio-assessment-settings-form-select">
<option value="jshint">JSHint (style)</option>
<option value="jslint">JSLint (style)</option>
</select>
</div>
</div>
</div>
<div class="test-case-container">
<div class="settings-content-row-container test-case-controls-container">
<div class="codio-assessment-settings-form-control codio-assessment-settings-form-input-container test-case-add-case-container">
<label for="addCase" class="codio-assessment-settings-form-label">Add case</label>
<input id="addCase" name="addCase" class="codio-assessment-settings-form-input"/>
</div>
<button class='add-case-btn codio-assessment-settings-button codio-assessment-settings-button--secondary'>Add case</button>
</div>
<div class="test-case-list"></div>
</div>
</div>
</body>
</html>
83 changes: 83 additions & 0 deletions settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
(function () {
const collectSettings = () => {
const instructions = $('#instructions').val()
const timeout = parseInt($('#timeout').val(), 10);

return {instructions, timeout};
}

const exportSettings = () => {
const data = collectSettings();
window.codioAssessmentsHelper.send(window.codioAssessmentsHelper.METHODS.EXPORT_SETTINGS_RESPONSE, data);
}

const applySettings = (settings = {}) => {
$('#instructions').val(settings.instructions || '');
$('#timeout').val(settings.timeout || '');
}

const processMessage = (jsonData) => {
console.log('settings iframe processMessage', jsonData)
try {
const {method, data} = JSON.parse(jsonData);
switch (method) {
case window.codioAssessmentsHelper.METHODS.EXPORT_SETTINGS:
exportSettings();
break;
case window.codioAssessmentsHelper.METHODS.GET_SETTINGS_RESPONSE:
applySettings(data.settings);
break;
}
} catch {}
}

const onSubtypeChanged = (language, subtype) => {
$('.lang-subtype-settings-container').addClass('hide')
$(`.lang-subtype-${language}-${subtype}-settings`).removeClass('hide')
}

const onLanguageChanged = (language) => {
$('.language-settings-container').addClass('hide')
$(`.${language}-container`).removeClass('hide')
const subtype = $(`#${language}LangSubtype`).val()
onSubtypeChanged(language, subtype)
}

const bindEvents = () => {
$('#languageType').on('change', function () {
const languageType = $(this).val();
onLanguageChanged(languageType);
})
$('.lang-subtype-select').on('change', function () {
const langSubtype = $(this).val();
onSubtypeChanged($('#languageType').val(), langSubtype);
})

// $("html").on("dragover", function(event) {
// event.preventDefault();
// event.stopPropagation();
// console.log('dragover', event);
// });
//
// $("html").on("dragleave", function(event) {
// event.preventDefault();
// event.stopPropagation();
// console.log('dragover', event);
// });

$("html").on("drop", function(event) {
event.preventDefault();
event.stopPropagation();
console.log('drop', event);
});
}

const onLoad = async () => {
window.codioAssessmentsHelper.registerMessageListener(processMessage)
window.codioAssessmentsHelper.send(window.codioAssessmentsHelper.METHODS.GET_SETTINGS)

bindEvents()
}

window.addEventListener('load', onLoad);
})()