<!-- Save as .html and open -->
<!DOCTYPE html>
<html>
<head>
<style>*{font-family: serif;font-size:12pt;}.extra{font-style:italic;}
html,body{width:100%;margin:0px;padding:0px;}.progressbar-wrapper {position: relative;z-index: 1;width:100%;background-color:#dddddd;}
#progressbar {position: absolute; top: 0; bottom: 0;left: 0;background-color: #dcf3dd;z-index: -1;}
</style>
</head>
<body id="body" contenteditable='true'>
<p contenteditable='false'><input type='checkbox' class='input'/>Title <input type='checkbox' class='input'/>Who <input type='checkbox' class='input'/>Where <input type='checkbox' class='input'/>When <input type='checkbox' class='input'/>Why <input type='checkbox' class='input'/>What <input type='checkbox' class='input'/>How <input type='checkbox' class='input'/>First paragraph <input type='checkbox' class='input'/>Second paragraph <input type='checkbox' class='input'/>Third paragraph <input type='checkbox' class='input'/>At least two independent sources <input type='checkbox' class='input'/>Submit to wiki</p>
<div class="progressbar-wrapper">
<span id='myp'></span>% Complete
<div id="progressbar" style="width: 78%"></div>
</div>
<p><input type="button" id="load" value="Load"/><input type="button" id="save" value="Save"/></p>
<script lang="javascript">
// Get reference to the "canvas"
var can = document.getElementById("body");
// Save the content of the canvas to localStorage
function saveData(){
localStorage.setItem("wnappNewarticleBody", can.innerHTML);
}
// Get localStorage data
function restoreData(){
can.innerHTML = localStorage.getItem("wnappNewarticleBody");
}
// get load and save references
var load = document.getElementById("load");
var save = document.getElementById("save");
// Set up event handlers
load.addEventListener("click", restoreData);
save.addEventListener("click", saveData);
</script>
<h1>[Type article title here in the present tense, i.e., 'Mr Obama runs for President of the United States']</h1>
<p class='extra'>(Delete the five paragraphs below after you're done writing the first paragraph)</p>
<p class='extra'> Who: ...</p>
<p class='extra'>What: ...</p>
<p class='extra'>Why: ...</p>
<p class='extra'>Where: ...</p>
<p class='extra'>How: ...</p>
<p class='extra'>When: ...</p>
<p class='extra'>(Delete the five paragraphs above after you're done writing the first paragraph)</p>
<p>[Write first paragraph here answering 5Ws. Use past tense]</p>
<p>[Second paragraph: more details]</p>
<p>[Third paragraph: context and background]</p>
<h2> At least two independent sources</h2>
<p>
<ul>
<li>[...Paste URL here...]</li>
<li>[...Paste URL here...]</li>
<li>[...Paste URL here...]</li>
<li>[...Paste URL here...]</li>
<li>[...Paste URL here...]</li>
</ul>
</p>
<p>Once done, visit <a href="https://en.wikinews.org/wiki/Wikinews:Writing_an_article#Starting_out">WN:WRITE</a> (right-click and open in a new tab)</p>
<script>
function updateMyInputs(){
myNumber = document.getElementsByClassName("input").length;
myNumberChecked = document.querySelectorAll('input[type="checkbox"]:checked').length;
myPercent = Math.floor(100*myNumberChecked/myNumber);
console.log(myPercent);
document.getElementById('progressbar').style.width=myPercent + '%';
var mycolor='';if(myPercent<30){mycolor='#ffdddd';}else if (myPercent<60){mycolor='#ffffdd';} else if (myPercent<90){mycolor='#eeeeee';} else {mycolor='#ddffdd';};
document.getElementById('progressbar').style.backgroundColor=mycolor;
document.getElementById('myp').innerHTML = myPercent;
}
// get load and save references
var inputs = document.getElementsByClassName("input");
Array.from(inputs).forEach((item) => item.addEventListener("click", updateMyInputs));
</script>
</body>
</html>
