Commit 29aaf877 authored by Thomas Dennis's avatar Thomas Dennis

Use a Python script to update the boilerplate HTML in all files at once based...

Use a Python script to update the boilerplate HTML in all files at once based on a template + start improving the CSS.
parent b65585dc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<div class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<span class="custom-expand"></span>
<a href="#">About</a>
</div>
<div class="body-content">
<!--yield-->
</div>
<small class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</small>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<script src="js/util.js"></script>
<script src="js/verb_u.js"></script>
<script src="js/verb_eru.js"></script>
<script src="js/adjective_i.js"></script>
<script src="js/adjective_na.js"></script>
<script src="js/conjugate.js"></script>
<title>naniJSore - Conjugations</title>
</head>
<body onload="setup()">
<h1>Japanese Conjugations Quiz</h1>
<p>
How much do you know about Japanese verb/adjective conjugation rules?
Try to answer the questions below, then press the <b>Check Results</b>
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.
</p>
<p>
<b>NOTE:</b> Answers should be entered using
<a href="http://en.wiktionary.org/wiki/romaji" target="_blank">romaji</a>
characters.
</p>
<h3>Resources</h3>
<ul>
<li>Learn about <b>verbs</b> on <a href="http://japanese.about.com/library/weekly/aa031101b.htm" target="_blank">about.com</a></li>
<li>Learn about <b>adjectives</b> on <a href="http://japanese.about.com/library/weekly/aa040101b.htm" target="_blank">about.com</a></li>
<li>You can also look up words on <a href="http://www.csse.monash.edu.au/~jwb/cgi-bin/wwwjdic.cgi" target="_blank">WWWJDIC</a></li>
</ul>
<hr>
<div id="quizarea">
<noscript>Javascript is disabled.</noscript>
</div>
<hr>
<p>
<a class="jslink" href="#" onclick="check()"><b>Check Results</b></a>
<a class="jslink" href="#" onclick="reset()">Restart</a>
<span id="score"></span>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<div class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<span class="custom-expand"></span>
<a href="#">About</a>
</div>
<div class="body-content">
<!--content-->
<h1>Japanese Conjugations Quiz</h1>
<p>
How much do you know about Japanese verb/adjective conjugation rules?
Try to answer the questions below, then press the <b>Check Results</b>
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.
</p>
<p>
<b>NOTE:</b> Answers should be entered using
<a href="http://en.wiktionary.org/wiki/romaji" target="_blank">romaji</a>
characters.
</p>
<h3>Resources</h3>
<ul>
<li>Learn about <b>verbs</b> on <a href="http://japanese.about.com/library/weekly/aa031101b.htm" target="_blank">about.com</a></li>
<li>Learn about <b>adjectives</b> on <a href="http://japanese.about.com/library/weekly/aa040101b.htm" target="_blank">about.com</a></li>
<li>You can also look up words on <a href="http://www.csse.monash.edu.au/~jwb/cgi-bin/wwwjdic.cgi" target="_blank">WWWJDIC</a></li>
</ul>
<hr>
<div id="quizarea">
<noscript>Javascript is disabled.</noscript>
</div>
<hr>
<p>
<a class="jslink jslink-primary" href="#top" onclick="check()">Check Results</a>
<a class="jslink" href="#top" onclick="reset()">Restart</a>
<span id="score"></span>
</p>
<script src="js/verb_u.js"></script>
<script src="js/verb_eru.js"></script>
<script src="js/adjective_i.js"></script>
<script src="js/adjective_na.js"></script>
<script src="js/conjugate.js"></script>
<!--content-->
</div>
<small class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</small>
</body>
</html>
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
{
/* TODO: This should be changed to a class, so it doesn't affect ALL tables. */
table {
background: #DDF;
color: #000;
border: 2px solid #AAA;
......@@ -12,21 +65,43 @@ table
padding: 4px;
}
.jslink
{
text-decoration: none;
background: #EEE;
/* 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;
border: 1px outset #000;
padding: 4px;
background: #DDD;
text-decoration: none;
font: normal sans-serif;
}
.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
{
/* This is used to style the "Score" text at the bottom of the page. */
#score {
padding: 8px;
color: #008;
font-size: large;
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<h1>naniJSore</h1>
<ul>
<li><a href="nouns.htm">Nouns (Multi-lingual)</a></li>
<li><a href="conjugate.htm">Verb Conjugations (Japanese)</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<div class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<span class="custom-expand"></span>
<a href="#">About</a>
</div>
<div class="body-content">
<!--content-->
<h1>naniJSore</h1>
<ul>
<li><a href="nouns.html">Nouns (Multi-lingual)</a></li>
<li><a href="conjugate.html">Verb Conjugations (Japanese)</a></li>
</ul>
<!--content-->
</div>
<small class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</small>
</body>
</html>
......@@ -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();
"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"],
......@@ -39,27 +37,29 @@ function setLanguage(lang)
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();
"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",
......
"use strict";
function addFooter()
{
document.body.appendChild(document.createElement("hr"));
document.body.appendChild(document.createElement("small")).innerHTML =
"<a href='index.htm'>&lt;- Main Page</a> | This page is part of the naniJSore project. Get the latest version from <a href='https://gitlab.com/gobusto/nanijsore/tree/master'>GitLab</a>.";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="default.css">
<script src="js/util.js"></script>
<script src="js/nouns.js"></script>
<script src="js/nouns_de.js"></script>
<script src="js/nouns_en.js"></script>
<script src="js/nouns_jp.js"></script>
<title>naniJSore - Nouns</title>
</head>
<body onload="setup()">
<noscript>Javascript is disabled.</noscript>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="default.css">
<title>naniJSore</title>
</head>
<body>
<div class="custom-navbar">
<a href="index.html" class="custom-brand">
<span></span> naniJSore
</a>
<a href="nouns.html">Nouns</a>
<a href="conjugate.html">Conjugations</a>
<span class="custom-expand"></span>
<a href="#">About</a>
</div>
<div class="body-content">
<!--content-->
<div id="noun-content">
<noscript>Javascript is disabled.</noscript>
</div>
<script src="js/nouns_en.js"></script>
<script src="js/nouns_de.js"></script>
<script src="js/nouns_jp.js"></script>
<script src="js/nouns.js"></script>
<!--content-->
</div>
<small class="custom-navbar custom-footer">
<a href="index.html">Index</a>
<span class="custom-expand">
<a href='https://gitlab.com/gobusto/nanijsore/tree/master'>Get the source code</a>
</span>
<a href="mailto:goDOTbusto@gmail.com">
Contact
</a>
</small>
</body>
</html>
#!/usr/bin/env python
import os
def main():
"""Update the HTML files based on the _layout.html file."""
LAYOUT_KEYWORD = "<!--yield-->" # Placeholder text in the layout HTML file.
OUTPUT_KEYWORD = "<!--content-->" # 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()
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment