diff --git a/_layout.html b/_layout.html new file mode 100644 index 0000000000000000000000000000000000000000..c792af4efa3240186db9a52e909735e638c33f38 --- /dev/null +++ b/_layout.html @@ -0,0 +1,35 @@ + + + + + + + naniJSore + + + +
+ + naniJSore + + Nouns + Conjugations + + About +
+ +
+ +
+ + + Index + + Get the source code + + + Contact + + + + diff --git a/conjugate.htm b/conjugate.htm deleted file mode 100644 index b3c377c6ac91fb0e9ede11287a9f4e8bcda8857e..0000000000000000000000000000000000000000 --- a/conjugate.htm +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - naniJSore - Conjugations - - -

Japanese Conjugations Quiz

-

- How much do you know about Japanese verb/adjective conjugation rules? - Try to answer the questions below, then press the Check Results - button to see how well you did. Information about incorrect answers will - be shown underneath each question, and the total score will be displayed - at the bottom of the page. -

-

- NOTE: Answers should be entered using - romaji - characters. -

-

Resources

- -
-
- -
-
-

- Check Results - Restart - -

- - diff --git a/conjugate.html b/conjugate.html new file mode 100644 index 0000000000000000000000000000000000000000..6425c12fb6e2737230eeb9c8d86fe3345199a996 --- /dev/null +++ b/conjugate.html @@ -0,0 +1,70 @@ + + + + + + + naniJSore + + + +
+ + naniJSore + + Nouns + Conjugations + + About +
+ +
+ +

Japanese Conjugations Quiz

+

+ How much do you know about Japanese verb/adjective conjugation rules? + Try to answer the questions below, then press the Check Results + button to see how well you did. Information about incorrect answers will + be shown underneath each question, and the total score will be displayed + at the bottom of the page. +

+

+ NOTE: Answers should be entered using + romaji + characters. +

+

Resources

+ +
+
+ +
+
+

+ Check Results + Restart + +

+ + + + + + +
+ + + Index + + Get the source code + + + Contact + + + + diff --git a/default.css b/default.css index d2d9c904a4f173e22608f2a14cfdf92182986aae..8673c01dcbc164a041972121285fc91550fb8aa7 100644 --- a/default.css +++ b/default.css @@ -1,34 +1,109 @@ -body { background: #EEF; font-family: sans; font-size:small; } +/* These CSS rules are used to create the basic "navbar" layout stuff. */ + +html { + position: relative; + min-height: 100%; +} + +body { + margin:0; + margin-bottom: 32px; + background: #EEF; + font-family: sans-serif; + font-size:small; +} + +.custom-footer { + position: absolute; + height: 24px; + bottom: 1px; +} + +.custom-navbar { + background-color: #222; + display:table-row; + width:100%; + white-space: nowrap; +} + +.custom-navbar > * { + display:table-cell; + vertical-align: middle; + padding: 4px 8px 4px 8px; +} + +.custom-navbar a { + color: #9d9d9d; + text-decoration: none; +} + +.custom-navbar a:hover { color: #fff; } + +.custom-expand { width:100%; text-align:center; } + +.custom-brand { + font-weight: bold; + font-size: large; + text-shadow: #08f 0 0 3px; + color: #def !important; +} + +.body-content { margin: 8px; } + +/* Misc. stylistic bits. */ h1 { margin: 0; text-align: center; } h1, h2, h3 { color:#800; } -table -{ - background: #DDF; - color: #000; - border: 2px solid #AAA; - border-radius: 8px; - padding: 4px; +/* TODO: This should be changed to a class, so it doesn't affect ALL tables. */ + +table { + background: #DDF; + color: #000; + border: 2px solid #AAA; + border-radius: 8px; + padding: 4px; +} + +/* These classes are used to create button-like links, similar to Bootstrap. */ + +.jslink { + display: inline-block; + box-sizing: border-box; + padding: 8px; + + border-radius: 4px; + border: 2px solid #888; + + color: #000; + background: #DDD; + + text-decoration: none; + font: normal sans-serif; } -.jslink -{ - text-decoration: none; - background: #EEE; - color: #000; - border: 1px outset #000; - padding: 4px; +.jslink:hover { background: #EEE; } + +.jslink-primary { + border-color: #148; + color: #FFF; + background: #37B; + font-weight: bold; } +.jslink-primary:hover { background: #48C; } + +/* These classes are used to style the "answer" text-boxes. */ + .blank_answer { background: #FFF; color: #000; } .right_answer { background: #AFA; color: #000; } .wrong_answer { background: #FAA; color: #000; } -#score -{ - padding: 8px; - color: #008; - font-size: large; - font-weight: bold; +/* This is used to style the "Score" text at the bottom of the page. */ + +#score { + padding: 8px; + color: #008; + font-size: large; + font-weight: bold; } diff --git a/index.htm b/index.htm deleted file mode 100644 index cb24cfedeae61f205188495a56ba0914e5afb39f..0000000000000000000000000000000000000000 --- a/index.htm +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - naniJSore - - -

naniJSore

- - - diff --git a/index.html b/index.html new file mode 100644 index 0000000000000000000000000000000000000000..ad0e326ca34fc6ddd2925c63a50d7a8826c80b80 --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + + naniJSore + + + +
+ + naniJSore + + Nouns + Conjugations + + About +
+ +
+ +

naniJSore

+ + +
+ + + Index + + Get the source code + + + Contact + + + + diff --git a/js/conjugate.js b/js/conjugate.js index c30f5784fd56c9550f0eb899e5d3877d3e4cf187..c773a208b3e80c736b390624e1d73b10306d42bc 100644 --- a/js/conjugate.js +++ b/js/conjugate.js @@ -12,9 +12,6 @@ var QUESTION = [ function setup() { - // Add the common stuff to the bottom of the page. - addFooter(); - // Generate some HTML elements for each question. var parent = document.getElementById("quizarea"); for (var n = 0; n < QUESTION.length; ++n) @@ -188,3 +185,6 @@ function check() document.getElementById("score").innerHTML = "Score: " + String(score) + "/" + String(total); } + +// Set "ready" function. +document.onready = setup(); diff --git a/js/nouns.js b/js/nouns.js index 601a15bcc024223aa642e6277d0f67317950c3da..c7a9ea4eb5e2d84632342f37d62a0b9362180ad3 100644 --- a/js/nouns.js +++ b/js/nouns.js @@ -1,7 +1,5 @@ "use strict"; -var LANGUAGE = {}; // NOTE: The other nouns_xx.js files add stuff to this. - // This defines the question set: var CATEGORIES = { "animal": ["bird", "cat", "cow", "dog", "horse", "mouse", "pig", "rabbit", "tiger"], @@ -38,28 +36,30 @@ function setLanguage(lang) // This function is called when the page first loads. function setup() { - + + var body = document.getElementById("noun-content"); + // Create a language selection "menu" at the top of the page. for (var lang in LANGUAGE) { - document.body.appendChild(document.createTextNode(" ")); - var img = document.body.appendChild(flag(lang)); + body.appendChild(document.createTextNode(" ")); + var img = body.appendChild(flag(lang)); img.style.cursor = "pointer"; img.setAttribute("onclick", "setLanguage('" + lang + "')"); } // Create the "intro" section at the top of the page. - document.body.appendChild(document.createElement("h1")).id = "page_title"; - document.body.appendChild(document.createElement("p")).id = "page_intro"; - document.body.appendChild(document.createElement("hr")); + body.appendChild(document.createElement("h1")).id = "page_title"; + body.appendChild(document.createElement("p")).id = "page_intro"; + body.appendChild(document.createElement("hr")); // Create the questions. for (var c in CATEGORIES) { - document.body.appendChild(document.createElement("h2")).id = c; + body.appendChild(document.createElement("h2")).id = c; - var table = document.body.appendChild(document.createElement("table")); + var table = body.appendChild(document.createElement("table")); for (var i = 0; i < CATEGORIES[c].length; ++i) { @@ -81,12 +81,12 @@ function setup() } // Create the "answer buttons" at the bottom of the page. - document.body.appendChild(document.createElement("hr")); + body.appendChild(document.createElement("hr")); for (var lang in LANGUAGE) { - document.body.appendChild(document.createTextNode(" ")); - var a = document.body.appendChild(document.createElement("a")); - a.href = "#"; + body.appendChild(document.createTextNode(" ")); + var a = body.appendChild(document.createElement("a")); + a.href = "#top"; a.className = "jslink"; a.setAttribute("onclick", "check('" + lang + "')"); @@ -95,9 +95,6 @@ function setup() } - // Add the standard footer stuff. - addFooter(); - // Now that everything is ready, set the default UI language. setLanguage("en"); @@ -133,3 +130,6 @@ function check(lang) // TODO: Output the score here. } + +// Set "ready" function. +document.onready = setup(); diff --git a/js/nouns_en.js b/js/nouns_en.js index a7db9d50b2bd4e6a3e502e32362f38a969900376..ec4c9ba160c0a5e0b14f4f0b0e36ef31593c6aa6 100644 --- a/js/nouns_en.js +++ b/js/nouns_en.js @@ -1,5 +1,7 @@ "use strict"; +var LANGUAGE = {}; + LANGUAGE["en"] = { title: "Nouns", intro: "Enter an answer next to each item below, and then click the relevant button at the bottom of the page", diff --git a/js/util.js b/js/util.js deleted file mode 100644 index d390a64d9968f93dfb9e36fe1134daa876a1c682..0000000000000000000000000000000000000000 --- a/js/util.js +++ /dev/null @@ -1,8 +0,0 @@ -"use strict"; - -function addFooter() -{ - document.body.appendChild(document.createElement("hr")); - document.body.appendChild(document.createElement("small")).innerHTML = - "<- Main Page | This page is part of the naniJSore project. Get the latest version from GitLab."; -} diff --git a/nouns.htm b/nouns.htm deleted file mode 100644 index 029c5a19138f4cfdf82d0328a238a257adf9e0c9..0000000000000000000000000000000000000000 --- a/nouns.htm +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - naniJSore - Nouns - - - - - diff --git a/nouns.html b/nouns.html new file mode 100644 index 0000000000000000000000000000000000000000..6e920b5b668475f5e30197e1ed36567151ea579a --- /dev/null +++ b/nouns.html @@ -0,0 +1,43 @@ + + + + + + + naniJSore + + + +
+ + naniJSore + + Nouns + Conjugations + + About +
+ +
+ +
+ +
+ + + + + +
+ + + Index + + Get the source code + + + Contact + + + + diff --git a/update_layout.py b/update_layout.py new file mode 100755 index 0000000000000000000000000000000000000000..9252527fd78d0940e86c0c0b4cab95041b71d34c --- /dev/null +++ b/update_layout.py @@ -0,0 +1,37 @@ +#!/usr/bin/env python +import os + + +def main(): + """Update the HTML files based on the _layout.html file.""" + LAYOUT_KEYWORD = "" # Placeholder text in the layout HTML file. + OUTPUT_KEYWORD = "" # Layout "boundaries" in the output HTML. + + # Read in the "layout" HTML. This is used as a template for the other files. + with open("_layout.html") as layout_file: + layout_html = layout_file.read() + + # Update the contents of the other HTML files to match the "layout" HTML. + for file_name in os.listdir("."): + if file_name.startswith("_") or not file_name.lower().endswith(".html"): + continue # Ignore non-HTML files and the layout HTML. + + print(" ".join(["Updating", file_name])) + with open(file_name) as src: + # Get the current HTML content and remove any old "layout" stuff. + old_content = src.read().split(OUTPUT_KEYWORD) + if len(old_content) == 3: + text = old_content[1] # Parts 0 and 2 are the old layout HTML. + elif len(old_content) == 1: + text = old_content[0] # No layout HTML keywords were found. + else: + print(' '.join(["\tCouldn't update", file_name])) + continue # The number of marker keywords doesn't make sense... + + # Wrap the page content in the NEW layout HTML and overwrite it. + text = '\n'.join([OUTPUT_KEYWORD, text.strip(), OUTPUT_KEYWORD]) + with open(file_name, 'w') as out: + out.write(layout_html.replace(LAYOUT_KEYWORD, text)) + +if __name__ == '__main__': + main()