diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b734482 --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +*.py[cod] + +# C extensions +*.so + +# Packages +*.egg +*.egg-info +dist +build +eggs +parts +bin +var +sdist +develop-eggs +.installed.cfg +lib +lib64 + +# Installer logs +pip-log.txt + +# Unit test / coverage reports +.coverage +.tox +nosetests.xml + +# Translations +*.mo + +# Mr Developer +.mr.developer.cfg +.project +.pydevproject +.idea + +.DS_Store +__VERSION__.py + +__pycache__ diff --git a/README.md b/README.md new file mode 100644 index 0000000..9f38106 --- /dev/null +++ b/README.md @@ -0,0 +1,148 @@ +checkio-task-template +===================== + +This is the basic CheckiO template for user generated tasks. +It has a fixed folder structure so please be careful with +your file and naming conventions. + + +## Tasks examples + +[Triangle angles](https://github.com/Bryukh-Checkio-Tasks/checkio-task-triangle-angles) + +[Magic square](https://github.com/Bryukh-Checkio-Tasks/checkio-task-magic-square) + + +## Examples made by CheckIO's users + +Several users took the challenge to create their own missions, you can view (and solve!) them on CheckiO. +Like [Amachua](http://www.checkio.org/user/Amachua/)’s [Sudoku Solver](http://www.checkio.org/mission/sudokusolver/) or [Suwanditan](http://www.checkio.org/user/suwanditan/)’s [Periodic Table](http://www.checkio.org/mission/periodic-table/). +(Psst . . . our CTO doesn’t even know how to solve this challenge!) + + +# Files definitions + +Below you can read an explanation for the role of each folder and file inside the project. + +### Info folder + +This folder contains information about the task's mission. + +#### task_description.html + +This file is a description for your task. Here, you should explain the goal of the task. +When writing this file, you must use proper HTML syntax for the description to be readable on the site as it will be inserted on the task page as a HTML block. +If you are not familiar with html code, you can find a choise of on-line free html editors on the www . + +##### Task's text +Here is where you place the main description of the task. +You can insert some images for explanation (see below for information about images) +and you can use html tags as ```em```, ```strong``` or ```pre``` to display formulas or example code. +Each paragraph or div element can have the class "for_editor_only" or "for_info_only". + +**"for\_editor\_only"** – means that the element will only show in the editor mode. + +**"for\_info\_only"** – will only show up in the main task description. + +##### Input and Output +This is a short description of the input and output data. + +##### Example +This section gives some examples for the task. +You can use the ```pre``` tag with class "brush: python" for syntax highlighting. + +##### Images +You can paste some images in your text to illustate your task. +The image files must be placed inside the `ìnfo/media` folder. +The link to these is defined as src="{{ MEDIA_URL }}/*image-name.png*" +Illustrations should be created with respect to our colors guide: `info/colors.pdf`. + +##### Example +``` +
+ +
+``` +This will place a picture which will scaled down to a height of 100 pixels in a html paragarph. +Due `class="for_info_only"` it will only show up in the main task discription, +where it will be alined to the horizontal center of the page `style="text-align: center;`. + +##### Icons +Icons for the task are placed inside the `info/logo` folder. +Icons are created as a pair: **disabled.svg** for unsolved tasks and **enabled.svg** for solved tasks. +The task runner will show either one of these icons and users will be able to click on it. +##### Icon specifications +All icons shoud match the folowing specifications: +**Colors:** Icons should be created with the specified icons' colors from our colors guide: `info/media/color.pdf`. +**Size:** Icons should be sized 128x128 px and placed inside a dark grey(#737370) colored block (size 116x116 px), outer corners rounded to a radius of 10px. +**Icon status:** On both icons, 'disabled' and 'enabled', shows the same drawing represented in light grey(#EBEDED). +At the 'enabled' icon however, some details of this drawing have been accentuated by a blue(#82D1F5) collor to highlight its active status. + +You can use the given templates. + +#### story.html +This is a funny story about the task, it does not need to explain the task's goal. +A paragraph of div with the story class does not show in the editor's task description. + +#### short_task_description.html +A summary of the task. + + +# A brief description of the other folders: + +### editor folder + +##### options.json +It's **not necessary** to change it. +Further description of this will be added later. +##### templates.html +This file describes layout and structure for the tests explanation or “try it”. +It's **not necessary** to change it. +Further description of this will be added later. +If you use a string for python3 -- use an unicode string. + +#### editor/animation Folder + +##### init.js +This file describes an animation for the tests explanation or “try it”. +At `python: 'function name'` and `js: 'function name'` you can state the identifier your function is to be called with (line 11, 12). +It's **not necessary** to change it. +Further description of this will be added later. + +##### init.css +This file describes styles for the tests explanation or “try it”. +It's **not necessary** to change it. +Further description of this will be added later. + +#### editor/initial_code Folder + +##### js-node +##### python_3 +These 2 files hold the code which users will see as a starting template for the node.js and the python3 interpretor. +If you use strings for python3 you can use unicode strings. + +### hints Folder + +##### _slug.html +You have the option to give some hints here. +It’s **not necessary** to change it. +Further description of this will be added later. + +### verification Folder +The files in this folder are for 'Check'. +They contain a referee and additional files with your tests. + +##### referee. py +This file also contains a referee and additional files for tests. +`python: 'function name'` and line 42: `js: 'function name'`. At `'function name'` you can state the identifier of your function to which the arguments you listed at **test.py** will be parsed for testing. +In the file itself you find a detailed description for its use. +##### tests. py +This file holds a dict with all you tests; its keys represent the categorie names of your tests eg. basics, extra, etc. +In the categories each test is dict again with 3 keys, ie. +`"input"` -- an arguments list as for your functions input, +`"answer"` -- the correct data to be retuned for the arguments from the input list, +`"explanation"` -- this a not necessary key, it's used to provide additional animation data, its value shall be `None` (or just remove this key) if you don't want use an animaion. +in the file you will find a detailed description, an example is also included. + + + diff --git a/autofill.sh b/autofill.sh new file mode 100755 index 0000000..90ce1d7 --- /dev/null +++ b/autofill.sh @@ -0,0 +1 @@ +checkio --domain py autofillrepo --py-function sum_two --js-function sumTwo . diff --git a/editor/animation/init.css b/editor/animation/init.css new file mode 100644 index 0000000..b3a0167 --- /dev/null +++ b/editor/animation/init.css @@ -0,0 +1,163 @@ +/*Please dont change it */ + +/*Common*/ + +.animation_results, +.animation_results .x-panel-body{ + background-color: #dfe8f7; +} + +.tryit_results, +.tryit_results .x-panel-body{ + background-color: #dfe8f7; + overflow: auto; +} + +.animation-success { + background: linear-gradient(to bottom, #ffac54 0%,#ff8d2c 100%); +} + +.animation-success div { + background-repeat: no-repeat; + height: 60px; + width: 390px; + background-image: url("http://www.checkio.org/static/imgv3/task_solved.png"); +} + +.center-exp { + margin-left:auto; + margin-right:auto; + display:table; +} + +/* Animation */ +.animation-content{ + background-color: #dfe8f7; + color: #696969; + font-family: Verdana, Arial, helvetica, sans-serif;; + font-size: 15px; + width: 100%; +} + +.animation-content .call, +.animation-content .answer, +.animation-content .output{ + font-weight: bold; + padding: 10px; + border: 2px dotted #a9a9a9; + margin: 10px; + color: black; + text-align: center; + letter-spacing: 1px; + word-break: break-word; + white-space: pre-wrap; +} + +.animation-content .error{ + color: #de0202; + border-color: #de0202; +} + +.tryit-content { + background-color: #dfe8f7; + font-family: Verdana, Arial, helvetica, sans-serif; +} + +.tryit-content .tool td{ + text-align: center; + vertical-align: top; + padding: 3px; +} + +/*it for firefox*/ +.tryit-content .tool tr:first-child td:last-child { + height: 20%; +} + +.tryit-content .checkio-result{ + font-size: 16px; + text-align: center; + color: #294270; + width: 160px; +} + +.tryit-content .btn { + padding: 4px 6px; + font-size: 14px; + font-family: Verdana, Arial, helvetica, sans-serif;; + font-weight: 500; + line-height: 1.428571429; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + border: 1px solid transparent; + border-radius: 4px; + background-color: #8FC7ED; +} + +.tryit-content .btn:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.tryit-content .btn:hover, +.tryit-content .btn:focus { + text-decoration: none; + background-color: #65A1CF; +} + +.tryit-content .btn:active, +.tryit-content .btn.active { + outline: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); +} + +.tryit-content .btn.disabled, +.tryit-content .btn[disabled], +fieldset[disabled] .btn { + pointer-events: none; + cursor: default; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; +} + +.tryit-content input[type="text"], +.tryit-content input[type="number"] +{ + display: inline-block; + padding: 4px 6px; + font-size: 14px; + line-height: 1.428571429; + font-family: inherit; + color: #294270; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #cccccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +.tryit-content input[type="text"]:focus, +.tryit-content input[type="number"]:focus{ + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +.tryit-content input[type="text"][disabled], +.tryit-content input[type="number"][readonly]{ + cursor: not-allowed; + background-color: #eeeeee; +} + +/* Your CSS */ +/* */ \ No newline at end of file diff --git a/editor/animation/init.js b/editor/animation/init.js new file mode 100644 index 0000000..a24cfc6 --- /dev/null +++ b/editor/animation/init.js @@ -0,0 +1,17 @@ +//Dont change it +//Dont change it +requirejs(['ext_editor_io', 'jquery_190'], + function (extIO, $) { + + var $tryit; + + var io = new extIO({ + multipleArguments: true, + functions: { + python: 'sum_two', + js: 'sumTwo' + } + }); + io.start(); + } +); diff --git a/editor/initial_code/js_node b/editor/initial_code/js_node new file mode 100644 index 0000000..f6e2dc2 --- /dev/null +++ b/editor/initial_code/js_node @@ -0,0 +1,19 @@ +"use strict"; + +function sumTwo(a, b) { + // sums two passed arguments + + // your code here + return 0; +} + +var assert = require('assert'); +if (!global.is_checking) { + console.log('Example:'); + console.log(sumTwo(3, 2)); + + // These "asserts" are used for self-checking and not for an auto-testing + assert.equal(sumTwo(3, 2), 5); + assert.equal(sumTwo(5, 7), 12); + console.log("Coding complete? Click 'Check' to earn cool rewards!"); +} diff --git a/editor/initial_code/python_3 b/editor/initial_code/python_3 new file mode 100644 index 0000000..5e64eec --- /dev/null +++ b/editor/initial_code/python_3 @@ -0,0 +1,16 @@ +def sum_two(a, b): + """ + sums two passed arguments + """ + # your code here + return None + + +if __name__ == '__main__': + print("Example:") + print(sum_two(3, 2)) + + # These "asserts" are used for self-checking and not for an auto-testing + assert sum_two(3, 2) == 5, "First" + assert sum_two(5, 7) == 12, "Second" + print("Coding complete? Click 'Check' to earn cool rewards!") diff --git a/editor/options.json b/editor/options.json new file mode 100644 index 0000000..5389e01 --- /dev/null +++ b/editor/options.json @@ -0,0 +1,7 @@ +{ + "expand_animation_results": true, + "animation_panel_width": 400, + "console_height": 300, + "tryit_results_height": 1, + "tryit_results_width": 1 +} diff --git a/editor/templates.html b/editor/templates.html new file mode 100644 index 0000000..bbb2b2f --- /dev/null +++ b/editor/templates.html @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/hints/_slug.html b/hints/_slug.html new file mode 100644 index 0000000..2a847fb --- /dev/null +++ b/hints/_slug.html @@ -0,0 +1,49 @@ + + + + + + ++ +
\ No newline at end of file diff --git a/info/task_description.html b/info/task_description.html new file mode 100644 index 0000000..238e44e --- /dev/null +++ b/info/task_description.html @@ -0,0 +1,52 @@ + + ++ Sum two passed ints +
+ ++ +
+ + ++ Input: Two arguments. Both are ints. +
+ ++ Output: Int. +
+ + + ++ Example: +
+ +{% if interpreter.slug == "js-node" %} +sumTwo(2, 3) == 5 +sumTwo(5, 7) == 12 ++{% else %} +
sum_two(2, 3) == 5 +sum_two(5, 7) == 12 ++{% endif %} +
+ + How it’s used: + (math is used everywhere) +
+ + + ++ Precondition: + both given ints should be between -1000 and 1000 +
diff --git a/info/task_short_description.html b/info/task_short_description.html new file mode 100644 index 0000000..f5d8b9d --- /dev/null +++ b/info/task_short_description.html @@ -0,0 +1 @@ +Add short description \ No newline at end of file diff --git a/info/vectors/example.pdf b/info/vectors/example.pdf new file mode 100644 index 0000000..e809f0d Binary files /dev/null and b/info/vectors/example.pdf differ diff --git a/verification/referee.py b/verification/referee.py new file mode 100644 index 0000000..d3ffb1c --- /dev/null +++ b/verification/referee.py @@ -0,0 +1,48 @@ +""" +CheckiOReferee is a base referee for checking you code. + arguments: + tests -- the dict contains tests in the specific structure. + You can find an example in tests.py. + cover_code -- is a wrapper for the user function and additional operations before give data + in the user function. You can use some predefined codes from checkio.referee.cover_codes + checker -- is replacement for the default checking of an user function result. If given, then + instead simple "==" will be using the checker function which return tuple with result + (false or true) and some additional info (some message). + You can use some predefined codes from checkio.referee.checkers + add_allowed_modules -- additional module which will be allowed for your task. + add_close_builtins -- some closed builtin words, as example, if you want, you can close "eval" + remove_allowed_modules -- close standard library modules, as example "math" + +checkio.referee.checkers + checkers.float_comparison -- Checking function fabric for check result with float numbers. + Syntax: checkers.float_comparison(digits) -- where "digits" is a quantity of significant + digits after coma. + +checkio.referee.cover_codes + cover_codes.unwrap_args -- Your "input" from test can be given as a list. if you want unwrap this + before user function calling, then using this function. For example: if your test's input + is [2, 2] and you use this cover_code, then user function will be called as checkio(2, 2) + cover_codes.unwrap_kwargs -- the same as unwrap_kwargs, but unwrap dict. + +""" + +from checkio.signals import ON_CONNECT +from checkio import api +from checkio.referees.io import CheckiOReferee +from checkio.referees import cover_codes + +from tests import TESTS + +api.add_listener( + ON_CONNECT, + CheckiOReferee( + tests=TESTS, + function_name={ + "python": "sum_two", + "js": "sumTwo" + }, + cover_code={ + 'python-3': cover_codes.unwrap_args, + 'js-node': cover_codes.js_unwrap_args + } + ).on_ready) diff --git a/verification/tests.py b/verification/tests.py new file mode 100644 index 0000000..ac70df9 --- /dev/null +++ b/verification/tests.py @@ -0,0 +1,36 @@ +""" +TESTS is a dict with all of your tests. +Keys for this will be the categories' names. +Each test is a dict with + "input" -- input data for a user function + "answer" -- your right answer + "explanation" -- not necessarily a key, it's used for an additional info in animation. +""" + + +TESTS = { + "Basics": [ + { + "input": [3, 2], + "answer": 5, + "explanation": "3+2=?" + }, + { + "input": [5, 7], + "answer": 12, + "explanation": "5+7=?" + } + ], + "Extra": [ + { + "input": [6, 3], + "answer": 9, + "explanation": "6+3=?" + }, + { + "input": [6, 7], + "answer": 13, + "explanation": "6+7=?" + } + ] +}