how to hide answers in post

<Back

step 1, copy content of page, http://xyzcode.blogspot.com/2016/07/example-questions.html into a new post,  click HTML tab, cut the content, paste into a new file sim2.txt.

step 2. translate html.
Apply the following shell script

cat sim2.txt|sed 's/\(.*\)\(A:[A-K, ]*\)\(.*\)/\1<div class="answer">\2<\/div>\3/g' |sed 's/\(.*\)\(Explain:.*\)\(<.*\)/\1<div class="answer">\2<\/div>\3/g' |sed 's/\(.*\)\(Q:\)\(.*\)/\1<li>\2<\/li>\3/g' |sed s'/\(http:..xyzcode.blogspot.com.[0-9]\{4\}.[0-9]\{2\}.[a-zA-Z0-9-]*.html\)/<div class="answer"><a href="\1">\1<\/a><\/div>/g'

step 3. paste above output into the HTML tab. wrap them in <ol></ol> for line number.

step 4. apply these jquery in Configure HTML/JavaScript widget.

<div class="answer">
<button id="hide">Hide Answers</button></div>
<button id="show">Show Answers</button>

<br />

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3");
</script>

<script>
$(document).ready(function(){
    $(".answer").hide();
    $("#hide").click(function(){
        $(".answer").hide();
        $(".distraction").show();
        $("#show").show();
    });
    $("#show").click(function(){
        $(".answer").show();
        $(".distraction").hide();
        $("#show").hide();
    });
    //$('div.code').css({"color":"white", "background-color": "black"});
    $('div.code').css({"color":"black", "background-color": "#eff0f1"});
});

</script>

step 5. You got the result of the following page:
http://xyzcode.blogspot.com/2016/06/simulation-test-1-80-question-set-answer.html