Utopiah/flashcards.tmpl

## flashcards.tmpl
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>$WikiTitle | {$Group} / {$Title} $ActionTitle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="monetization" content="$ilp.gatehub.net/360717042">

    <!-- Le styles -->

    <!--HTMLHeader-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="$SkinDirUrl/images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="$SkinDirUrl/images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="$SkinDirUrl/images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="$SkinDirUrl/images/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="//fabien.benetou.fr/favicon.ico" type="image/x-icon" />

</head>

<body>
<style>
 li, code {font-size:2vw; line-height:3vw; white-space: normal !important; }
.TridactylStatusIndicator {display: none !important;}
</style>
        <div id="results" style="position:absolute; top:100px; left:100px;" ></div>
        <div id="past" style="position:absolute; bottom:10px; left:10px;" ></div>
        <button style="position:absolute; bottom:100px; right:100px;" onClick="remembered();">Remembered</button>
        <button style="position:absolute; bottom:100px; right:300px;" onClick="forgotten();">Forgotten</button>
        <!--PageText-->
<script>
// enabled in PmWiki local/config.php with $ActionSkin['flashcards'] = 'flashcards';

var WikiAuthor = "{$Author}" || "AnonymousFlashcardUser" // as POST overwritte the current author we assume login...
// and POST as the user. Should be more explicit.
var WikiPage = "{$Name}"
var WikiGroup = "{$Group}"

var current = 0
var savedPage = "Flashcards"+WikiAuthor+WikiGroup+WikiPage

var rememberedCards = []
var forgottenCards = []
pimvrReadRemote('PIMVRdata', savedPage, displayPast)

for (var el of document.querySelector("#wikitext").children)
 el.style.display = "none"
for (var el of document.querySelectorAll(".span8"))
 el.style.display = "none"
for (var el of document.querySelectorAll(".row-fluid"))
 el.className = ""

var cards = document.querySelectorAll("#wikitext ul")[0].children

for (var el of cards){
    var code = el.querySelector("code")
    code.style.opacity = 0
    code.onclick = e => { e.target.style.opacity = 1; }
    var question = code.nextSibling
    if (code.previousSibling && code.previousSibling.textContent.length > 1) question = code.previousSibling
    el.parentNode.style.display = "block" // enough for twitter Cards
    el.style.display = "none"
    el.style.margin = "100px"
}

cards[0].style.display = "block"

function displayPast( data ){

        document.querySelector("#past").innerText =
                `Last time ${data.date} you remembered ${data.remembered.join(", ")} but forgot ${data.forgotten.join(", ")}.`
}

function next(){
        cards[current].style.display = "none"
        current++; // could be randomized
        if (current > cards.length-1)
                ended()
        else
                cards[current].style.display = "block"
}

function ended(){
        document.querySelector("#results").innerText = `Remembered ${rememberedCards.join(", ")} but forgot ${forgottenCards.join(", ")}.`

        var writeURL = '/PIMVRdata/'+savedPage+'?action=edit';
        fetch(writeURL, {
            method: 'POST',
            headers: {'Content-Type':'application/x-www-form-urlencoded'},
            body: "post=1&author="+WikiAuthor+"&authpw=edit_password&text="
                + JSON.stringify({author:WikiAuthor, date:+Date.now(), forgotten:forgottenCards, remembered:rememberedCards})
        }).then(res => res).then(res => console.log(res))
}

function forgotten(){
        forgottenCards.push(current)
        next()
}

function remembered(){
        rememberedCards.push(current)
        next()
}

function pimvrReadRemote(group = 'PIMVRdata', page = savedPage, callback = console.log){
        fetch('https://fabien.benetou.fr/'+group+'/'+page+'?action=source')
            .then( response => { return response.json() } )
            .then( data => callback(data) )
}

</script>

<!--HTMLFooter-->
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>$WikiTitle \| {$Group} / {$Title} $ActionTitle</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="monetization" content="$ilp.gatehub.net/360717042">

	<!-- Le styles -->

	<!--HTMLHeader-->

	<!-- Fav and touch icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="$SkinDirUrl/images/ico/apple-touch-icon-144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="$SkinDirUrl/images/ico/apple-touch-icon-114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="$SkinDirUrl/images/ico/apple-touch-icon-72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" href="$SkinDirUrl/images/ico/apple-touch-icon-57-precomposed.png">
	<link rel="shortcut icon" href="//fabien.benetou.fr/favicon.ico" type="image/x-icon" />

	</head>

	<body>
	<style>
	li, code {font-size:2vw; line-height:3vw; white-space: normal !important; }
	.TridactylStatusIndicator {display: none !important;}
	</style>
	<div id="results" style="position:absolute; top:100px; left:100px;" ></div>
	<div id="past" style="position:absolute; bottom:10px; left:10px;" ></div>
	<button style="position:absolute; bottom:100px; right:100px;" onClick="remembered();">Remembered</button>
	<button style="position:absolute; bottom:100px; right:300px;" onClick="forgotten();">Forgotten</button>
	<!--PageText-->
	<script>
	// enabled in PmWiki local/config.php with $ActionSkin['flashcards'] = 'flashcards';

	var WikiAuthor = "{$Author}" \|\| "AnonymousFlashcardUser" // as POST overwritte the current author we assume login...
	// and POST as the user. Should be more explicit.
	var WikiPage = "{$Name}"
	var WikiGroup = "{$Group}"

	var current = 0
	var savedPage = "Flashcards"+WikiAuthor+WikiGroup+WikiPage

	var rememberedCards = []
	var forgottenCards = []
	pimvrReadRemote('PIMVRdata', savedPage, displayPast)

	for (var el of document.querySelector("#wikitext").children)
	el.style.display = "none"
	for (var el of document.querySelectorAll(".span8"))
	el.style.display = "none"
	for (var el of document.querySelectorAll(".row-fluid"))
	el.className = ""

	var cards = document.querySelectorAll("#wikitext ul")[0].children

	for (var el of cards){
	var code = el.querySelector("code")
	code.style.opacity = 0
	code.onclick = e => { e.target.style.opacity = 1; }
	var question = code.nextSibling
	if (code.previousSibling && code.previousSibling.textContent.length > 1) question = code.previousSibling
	el.parentNode.style.display = "block" // enough for twitter Cards
	el.style.display = "none"
	el.style.margin = "100px"
	}

	cards[0].style.display = "block"

	function displayPast( data ){

	document.querySelector("#past").innerText =
	`Last time ${data.date} you remembered ${data.remembered.join(", ")} but forgot ${data.forgotten.join(", ")}.`
	}

	function next(){
	cards[current].style.display = "none"
	current++; // could be randomized
	if (current > cards.length-1)
	ended()
	else
	cards[current].style.display = "block"
	}

	function ended(){
	document.querySelector("#results").innerText = `Remembered ${rememberedCards.join(", ")} but forgot ${forgottenCards.join(", ")}.`

	var writeURL = '/PIMVRdata/'+savedPage+'?action=edit';
	fetch(writeURL, {
	method: 'POST',
	headers: {'Content-Type':'application/x-www-form-urlencoded'},
	body: "post=1&author="+WikiAuthor+"&authpw=edit_password&text="
	+ JSON.stringify({author:WikiAuthor, date:+Date.now(), forgotten:forgottenCards, remembered:rememberedCards})
	}).then(res => res).then(res => console.log(res))
	}

	function forgotten(){
	forgottenCards.push(current)
	next()
	}

	function remembered(){
	rememberedCards.push(current)
	next()
	}

	function pimvrReadRemote(group = 'PIMVRdata', page = savedPage, callback = console.log){
	fetch('https://fabien.benetou.fr/'+group+'/'+page+'?action=source')
	.then( response => { return response.json() } )
	.then( data => callback(data) )
	}

	</script>

	<!--HTMLFooter-->
	</body>
	</html>