proto.html

<h3><a href="https://github.com/episphere/quest" target="_blank">quest.js</a> - questionnaire markup demo</h3>

<table>
    <thead><tr><td>markup (<a href="?questionnaries/demo.txt" id="demo">demo</a>)</td><td>quest.js rendering</td></tr></thead>
    <tbody><tr><td id="markup" style="vertical-align:top"><textarea></textarea></td><td id="rendering" style="vertical-align:top"></td></tr></tbody>
</table>

<script src="questProto.js"></script>

<script>
    (async function(){
        console.log('local anonymous');
        var ta = document.querySelector('textarea')
        ta.style.height=500
        //ta.style.position='fixed'
        ta.style.backgroundColor='#FAE5D3'
        ta.style.color='navy'
        ta.onkeyup=(ev)=>{
            rendering.innerHTML=quest.render(ta.value) // <-- this is where quest.js is engaged
        }
        ta.innerHTML='// type or paste questionnaire markup\n'
        
        var q=(location.search+location.hash).replace(/[\#\?]/g,'')
        if(q.length>3){
            ta.value = await (await fetch(q.split('&')[0])).text() // getting the first of markup&css
            ta.onkeyup()
        }
        ta.style.width=parseInt(ta.parentElement.style.width.slice(0,-1))-5+'%'
    })()

</script>