fuzzyfox/enable-markdown-kit.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Markdown (md) Enabled Kits

https://bugzilla.mozilla.org/show_bug.cgi?id=962526
Idea: allow users to write the bulk of the content in markdown... this is then parsed into html using showdown.js.
Markdown is typically easier for people to learn than HTML mostly due to its stripped down syntax. The nice thing about this is that markdown is a HTML preprocessor, so it can be used to start introducing some of the concepts of strcutured language that may make life easier moving to HTML and other langauges beyond.
Live Example: https://moz-wduyck.makes.org/thimble/markdownkit
Followup idea: Could use md to write content then parse to HTML for the kit. Not just for kit viewing
Questions:


Does this just add another thing to have to maintain + teach?
Should we be teaching people about preprocessing?
Does the energy to imliment properly out weigh any benefits?


## enable-markdown-kit.js
// turning the markdown feature into a one line include for kits.

// wicked closure pattern w/ hat tip to Paul Irish [source](https://gist.github.com/paulirish/315916)
(function(window, document, undefined){
	// check if Showdown is loaded already or not... if not, then load it
	// once we have Showdown run the converter
	if(!window.Showdown){
		var script        = document.createElement('script');
			script.src    = '//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js';
			script.onload = extendAndConvert;

		document.body.appendChild(script);
	}
	else {
		extendAndConvert();
	}

	// make a change to the indentation of the content to convert,
	// then run it through Showdown to output HTML in place of the Markdown.
	function extendAndConvert(){
		// get a converter instance, and define the regex for Thimble
		// created indentation
		var converter   = new window.Showdown.converter(),
			indentRegex = new RegExp("^[ \t\r\n]+");

		// find all the elements w/ the class markdown and convert
		// their contents to markdown
		Array.prototype.filter.call(document.querySelectorAll('.markdown'), function(element){
			var markdown = element.innerHTML,
				indent   = indentRegex.exec(markdown);

			indent            = indent[0].replace('\n', '');
			markdown          = markdown.replace('\n' + indent, '\n', 'gi');

			element.innerHTML = converter.makeHtml(markdown);
		});
	}
})(this, this.document);

## markdown-kit.html
<!DOCTYPE html><!-- ================================================================
WELCOME TO THE WEBMAKER TEACHING KIT TEMPLATE!
Use this template to create your own teaching kit, lesson plan or educational resource.
Edit the HTML below to add your own content, links and images.
Code comments like these will help with hints and guides.
Need help? Start here: http://mzl.la/teachingkit-tips
================================================================ --><html><head>
	<meta charset="utf-8">
	<meta content="width=640px" name="viewport">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" rel="stylesheet" type="text/css">
	<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://stuff.webmaker.org/teach-assets/css/style-desktop.css" media="all" rel="stylesheet" type="text/css">
	<link href="https://stuff.webmaker.org/teach-assets/css/style-mobile.css" media="screen and (max-device-width: 640px)" rel="stylesheet" type="text/css">
	<link href="https://stuff.webmaker.org/teach-assets/css/style-print.css" media="print" rel="stylesheet" type="text/css">
	<base target="_blank">
	<meta content="teach" name="webmaker:tags">
<!-- =============================== -->
<!-- ADD A THUMBNAIL IMAGE HERE -->
<!-- This is the image that will be displayed on the front page or Teach page -->
	<meta content="https://stuff.webmaker.org/thumbnails/thumb-toolkit-ways-of-the-web.png" name="webmaker:thumbnail">
<!-- =============================== -->

<!-- =============================== -->
<!-- ADD YOUR TITLE HERE -->
	<title>Teaching Kit Template</title>
<!-- =============================== -->
</head>
<body>
<div class="wrapper">

	<header id="header">
		<div id="teachingkit-banner">
			Teaching Kit
		</div>

		<div id="header-img">
<!-- =============================== -->
<!-- HEADER IMAGE -->
<!-- Just paste the URL for your image in the "src" attribute below -->
			<img alt="Header Image" height="180px" src="https://farm9.staticflickr.com/8104/8550872746_03becbb5dc.jpg" width="180px">
<!-- =============================== -->
		</div>

		<div id="header-content">
			<hgroup id="header-group">
<!-- =============================== -->
<!-- TITLE AND SUMMARY -->
			<h1>Your title goes here</h1>
			<h2>Give it a one-line summary here. What will participants make or learn?</h2>
<!-- =============================== -->
			</hgroup>
			<div id="metadata">
<!-- =============================== -->
<!-- Add your name here -->
				<span id="made-by">Made by <a href="http://example.com" id="author">your name</a></span>
<!-- =============================== -->
			</div>
		</div>

	</header>

	<div id="content">
		<div id="left-side">

<!-- =============================== -->
<!-- DESCRIPTION -->
			<section class="markdown">
				# Description
				What is your teaching kit all about? What does it help people make or learn? What was your inspiration for creating it?

					The markdown mod's still allow for code, it just removes the indentation to the same level as that of the first line.

				# Learning objectives
				What specific skills will participants learn? What new knowledge will they come away with? You might want to list these individually, like this:

				* Skill 1
				* Skill 2
				* Skill 3

				Not sure? Have a look at our new [Web Literacy Standard](https://wiki.mozilla.org/Learning/WebLiteracyStandard).

				# What you'll make together
				What will participants make? What's the end result or finished product? A web page? Video? Paper prototype? Dancing robots? :)

				# Preparation
				Are any special materials required? What tools will participants need? Should anything be set up in advance? Is there any software to install, or specific technical requirements?

				# Assessment and review
				How can participants assess and reflect on their work once it's complete? Feel free to add here if you have suggestions for...

				* Discussion questions. Any suggested topics or questions for follow-up discussion?
				* Assessment. Is there a specific standard or rubric you'd suggest using? Are there ways learners can assess each others' work? (Peer assessment?)
				* Sharing. What are some good ways participants can publish and share what they made?


			</section>
<!-- =============================== -->

<!-- =============================== -->
<!-- ASSESSMENT CRITERIA -->
			<section class="teach-checklist">
				<h1>Assessment criteria</h1>
				<div>
					Got a check-list of criteria, or things to look for in a great completed project? Feel free to list them here:
					<ul>
						<li><input id="r1" type="checkbox"><label for="r1"></label> Criteria 1</li>
						<li><input id="r2" type="checkbox"><label for="r2"></label> Criteria 2</li>
						<li><input id="r3" type="checkbox"><label for="r3"></label> Criteria 3</li>
					</ul>
				</div>
			</section>
<!-- =============================== -->
		</div>

		<div id="right-side">

<!-- AGENDA -->
			<section id="agenda">
				<h1>Agenda</h1>
				<div class="line"></div>
				<div>
					<ol>
						<li><a href="#">Activity 1</a></li>
						<li><a href="#">Activity 2</a></li>
						<li><a href="#">Activity 3</a></li>
						<li><a href="#">Activity 4</a></li>
					</ol>
				</div>
			</section>
<!-- =============================== -->

<!-- =============================== -->
<!-- ADDITIONAL RESOURCES -->
			<section class="teach-list">
				<h1>Additional Resources</h1>
				<div>
					<ul>

						<li><a href="http://foo.org/">You can include LINKS...</a></li>
						<li><a href="http://foo.org/">...to supporting pages and helpful resources...</a></li>
						<li><a href="http://foo.org/">...in this section</a></li>
					</ul>
				</div>
			</section>
<!-- =============================== -->

<!-- =============================== -->
<!-- TIPS & TRICKS -->
			<section class="teach-list">
				<h1>Tips and tricks</h1>
				<div>
					<ul>
						<li>
							<a href="https://support.mozilla.org/en-US/kb/top-tips-creating-great-teaching-kits">Tips for creating great teaching kits</a></li>
						<li><a href="https://support.mozilla.org/en-US/kb/pro-tips-webmaker-teaching-kits">Pro Tips for great teaching kits</a></li>
							<li><a href="https://webmaker.org/event-guides">Event Guides</a>
						</li>
					</ul>
				</div>
			</section>
<!-- =============================== -->
<!-- TAGS
Help others know what skills and competencies your teaching kit helps teach by tagging it! You'll have the opportunity to add tags upon publish. If your kit teaches Web Skills, consider using the Web Literacy Standard to tag it! Here's a helpful resource: https://support.mozilla.org/en-US/kb/how-tag-webmaker-makes-web-literacy-standard
-->
<!-- =============================== -->
		</div>

	</div>
</div>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
	<script>
		var converter = new Showdown.converter();
		var regex = new RegExp("^[ \t\r\n]+");
		Array.prototype.filter.call(document.querySelectorAll('.markdown'), function(element){
			var markdown = element.innerHTML;
			var mdPadding = regex.exec(markdown);
			mdPadding = mdPadding[0].replace('\n', '');
			markdown = markdown.replace('\n'+mdPadding, '\n', 'gi');
			element.innerHTML = converter.makeHtml(markdown);
		});
	</script>-->
<script src="./enable-markdown-kit.js"></script>
</body></html>
	// turning the markdown feature into a one line include for kits.

	// wicked closure pattern w/ hat tip to Paul Irish [source](https://gist.github.com/paulirish/315916)
	(function(window, document, undefined){
	// check if Showdown is loaded already or not... if not, then load it
	// once we have Showdown run the converter
	if(!window.Showdown){
	var script = document.createElement('script');
	script.src = '//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js';
	script.onload = extendAndConvert;

	document.body.appendChild(script);
	}
	else {
	extendAndConvert();
	}

	// make a change to the indentation of the content to convert,
	// then run it through Showdown to output HTML in place of the Markdown.
	function extendAndConvert(){
	// get a converter instance, and define the regex for Thimble
	// created indentation
	var converter = new window.Showdown.converter(),
	indentRegex = new RegExp("^[ \t\r\n]+");

	// find all the elements w/ the class markdown and convert
	// their contents to markdown
	Array.prototype.filter.call(document.querySelectorAll('.markdown'), function(element){
	var markdown = element.innerHTML,
	indent = indentRegex.exec(markdown);

	indent = indent[0].replace('\n', '');
	markdown = markdown.replace('\n' + indent, '\n', 'gi');

	element.innerHTML = converter.makeHtml(markdown);
	});
	}
	})(this, this.document);
	<!DOCTYPE html><!-- ================================================================
	WELCOME TO THE WEBMAKER TEACHING KIT TEMPLATE!
	Use this template to create your own teaching kit, lesson plan or educational resource.
	Edit the HTML below to add your own content, links and images.
	Code comments like these will help with hints and guides.
	Need help? Start here: http://mzl.la/teachingkit-tips
	================================================================ --><html><head>
	<meta charset="utf-8">
	<meta content="width=640px" name="viewport">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" rel="stylesheet" type="text/css">
	<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://stuff.webmaker.org/teach-assets/css/style-desktop.css" media="all" rel="stylesheet" type="text/css">
	<link href="https://stuff.webmaker.org/teach-assets/css/style-mobile.css" media="screen and (max-device-width: 640px)" rel="stylesheet" type="text/css">
	<link href="https://stuff.webmaker.org/teach-assets/css/style-print.css" media="print" rel="stylesheet" type="text/css">
	<base target="_blank">
	<meta content="teach" name="webmaker:tags">
	<!-- =============================== -->
	<!-- ADD A THUMBNAIL IMAGE HERE -->
	<!-- This is the image that will be displayed on the front page or Teach page -->
	<meta content="https://stuff.webmaker.org/thumbnails/thumb-toolkit-ways-of-the-web.png" name="webmaker:thumbnail">
	<!-- =============================== -->

	<!-- =============================== -->
	<!-- ADD YOUR TITLE HERE -->
	<title>Teaching Kit Template</title>
	<!-- =============================== -->
	</head>
	<body>
	<div class="wrapper">

	<header id="header">
	<div id="teachingkit-banner">
	Teaching Kit
	</div>

	<div id="header-img">
	<!-- =============================== -->
	<!-- HEADER IMAGE -->
	<!-- Just paste the URL for your image in the "src" attribute below -->
	<img alt="Header Image" height="180px" src="https://farm9.staticflickr.com/8104/8550872746_03becbb5dc.jpg" width="180px">
	<!-- =============================== -->
	</div>

	<div id="header-content">
	<hgroup id="header-group">
	<!-- =============================== -->
	<!-- TITLE AND SUMMARY -->
	<h1>Your title goes here</h1>
	<h2>Give it a one-line summary here. What will participants make or learn?</h2>
	<!-- =============================== -->
	</hgroup>
	<div id="metadata">
	<!-- =============================== -->
	<!-- Add your name here -->
	<span id="made-by">Made by <a href="http://example.com" id="author">your name</a></span>
	<!-- =============================== -->
	</div>
	</div>

	</header>

	<div id="content">
	<div id="left-side">

	<!-- =============================== -->
	<!-- DESCRIPTION -->
	<section class="markdown">
	# Description
	What is your teaching kit all about? What does it help people make or learn? What was your inspiration for creating it?

	The markdown mod's still allow for code, it just removes the indentation to the same level as that of the first line.

	# Learning objectives
	What specific skills will participants learn? What new knowledge will they come away with? You might want to list these individually, like this:

	* Skill 1
	* Skill 2
	* Skill 3

	Not sure? Have a look at our new [Web Literacy Standard](https://wiki.mozilla.org/Learning/WebLiteracyStandard).

	# What you'll make together
	What will participants make? What's the end result or finished product? A web page? Video? Paper prototype? Dancing robots? :)

	# Preparation
	Are any special materials required? What tools will participants need? Should anything be set up in advance? Is there any software to install, or specific technical requirements?

	# Assessment and review
	How can participants assess and reflect on their work once it's complete? Feel free to add here if you have suggestions for...

	* Discussion questions. Any suggested topics or questions for follow-up discussion?
	* Assessment. Is there a specific standard or rubric you'd suggest using? Are there ways learners can assess each others' work? (Peer assessment?)
	* Sharing. What are some good ways participants can publish and share what they made?


	</section>
	<!-- =============================== -->

	<!-- =============================== -->
	<!-- ASSESSMENT CRITERIA -->
	<section class="teach-checklist">
	<h1>Assessment criteria</h1>
	<div>
	Got a check-list of criteria, or things to look for in a great completed project? Feel free to list them here:
	<ul>
	<li><input id="r1" type="checkbox"><label for="r1"></label> Criteria 1</li>
	<li><input id="r2" type="checkbox"><label for="r2"></label> Criteria 2</li>
	<li><input id="r3" type="checkbox"><label for="r3"></label> Criteria 3</li>
	</ul>
	</div>
	</section>
	<!-- =============================== -->
	</div>

	<div id="right-side">

	<!-- AGENDA -->
	<section id="agenda">
	<h1>Agenda</h1>
	<div class="line"></div>
	<div>
	<ol>
	<li><a href="#">Activity 1</a></li>
	<li><a href="#">Activity 2</a></li>
	<li><a href="#">Activity 3</a></li>
	<li><a href="#">Activity 4</a></li>
	</ol>
	</div>
	</section>
	<!-- =============================== -->

	<!-- =============================== -->
	<!-- ADDITIONAL RESOURCES -->
	<section class="teach-list">
	<h1>Additional Resources</h1>
	<div>
	<ul>

	<li><a href="http://foo.org/">You can include LINKS...</a></li>
	<li><a href="http://foo.org/">...to supporting pages and helpful resources...</a></li>
	<li><a href="http://foo.org/">...in this section</a></li>
	</ul>
	</div>
	</section>
	<!-- =============================== -->

	<!-- =============================== -->
	<!-- TIPS & TRICKS -->
	<section class="teach-list">
	<h1>Tips and tricks</h1>
	<div>
	<ul>
	<li>
	<a href="https://support.mozilla.org/en-US/kb/top-tips-creating-great-teaching-kits">Tips for creating great teaching kits</a></li>
	<li><a href="https://support.mozilla.org/en-US/kb/pro-tips-webmaker-teaching-kits">Pro Tips for great teaching kits</a></li>
	<li><a href="https://webmaker.org/event-guides">Event Guides</a>
	</li>
	</ul>
	</div>
	</section>
	<!-- =============================== -->
	<!-- TAGS
	Help others know what skills and competencies your teaching kit helps teach by tagging it! You'll have the opportunity to add tags upon publish. If your kit teaches Web Skills, consider using the Web Literacy Standard to tag it! Here's a helpful resource: https://support.mozilla.org/en-US/kb/how-tag-webmaker-makes-web-literacy-standard
	-->
	<!-- =============================== -->
	</div>

	</div>
	</div>
	<!--<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
	<script>
	var converter = new Showdown.converter();
	var regex = new RegExp("^[ \t\r\n]+");
	Array.prototype.filter.call(document.querySelectorAll('.markdown'), function(element){
	var markdown = element.innerHTML;
	var mdPadding = regex.exec(markdown);
	mdPadding = mdPadding[0].replace('\n', '');
	markdown = markdown.replace('\n'+mdPadding, '\n', 'gi');
	element.innerHTML = converter.makeHtml(markdown);
	});
	</script>-->
	<script src="./enable-markdown-kit.js"></script>
	</body></html>