Get Interactive
You can add interactive hidden prompts or questions that tell you if your answer is correct by pasting the code shown below into an embed box. Full how code is given, as well as quick editor to personalize your code and their is a quick instructional video. Give it a go!
1. Hide a prompt, hint or answer to a question until it is clicked.
1. Hide a prompt, hint or answer to a question until it is clicked.
Either:
- Copy the code below and paste into an embed section on your page and then edit the code to set your text and colors
- Or, click the link below to edit your text and preview it by clicking the Run button before copying and pasting into an embed section.
https://editor.primary-apps.com/googlesites-interactive1.html
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet"><style>#container{border-radius:20px; width:90%;height:200px;font-family: 'Mansalva', cursive;font-size:40px;color:white;text-align:center;padding-top:20px;}</style><script>///// EDIT THE VALUES BELOW //////question="Why does no one like Russian dolls?"preAnswer="Click here for the answer."answer="Because they are so full of themselves!"color1="green" //edit background color for questioncolor2="red" //edit background color for answercolor3="yellow" //edit text color for questioncolor4="white" //edit text color for answer///// EDIT THE VALUES ABOVE /////////// For color names see: https://www.w3schools.com/colors/colors_names.asp</script><div id="container"><div id="ask"></div><div id="tell" style="color:yellow" onClick="this.innerHTML=answer"></div></div><script>document.getElementById('ask').innerHTML=questiondocument.getElementById('tell').innerHTML=preAnswerdocument.getElementById('ask').style.backgroundColor = color1document.getElementById('container').style.backgroundColor = color2document.getElementById('ask').style.color = color3document.getElementById('tell').style.color = color4</script>2. Ask a question and check the answer.
2. Ask a question and check the answer.
Either:
- Copy the code below and paste into an embed section on your page and then edit the code to set your text and colors
- Or, click the link below to edit your text and preview it by clicking the Run button before copying and pasting into an embed section.
https://editor.primary-apps.com/googlesites-interactive2.html
<script>//EDIT BELOW THIS LINEquestion="Yellow is made by mixing red light and which other color of light? (Answer using lower case and no spaces.)"answer="green"textIfRight="CORRECT"textIfWrong="NOT CORRECT"// EDIT ABOVE THIS LINE</script><style>input{margin:6px;font-size:30px;padding:4px;text-align:center;}span{margin:6px;font-size:30px;padding:4px;}</style><div style="border-radius:20px;border:solid black 3px;font-size:20px;padding:16px;background-color:white;font-family: Arial, Helvetica, sans-serif;"><div id="theQuestion"><br><br></div><input id="answerBox" style="width:100%"><input type="button" value="Am I right?" onClick="if(document.getElementById('answerBox').value==answer){document.getElementById('result').innerHTML=textIfRight} else{document.getElementById('result').innerHTML=textIfWrong}"><span id="result"></span></div><script>document.getElementById("theQuestion").innerHTML=question</script>3. Ask a multiple choice question.
3. Ask a multiple choice question.
Either:
- Copy the code below and paste into an embed section on your page and then edit the code to set your text and colors
- Or, click the link below to edit your text and preview it by clicking the Run button before copying and pasting into an embed section.
https://editor.primary-apps.com/googlesites-interactive3.html
<script>//EDIT BELOW THIS LINEquestion="What two colors of light combine together to make yellow light?"optionA="red and green"responseA="Yes! It may be hard to imagine but it is true."optionB="red and blue"responseB="No. That gives a purple or magenta color."optionC="blue and red"responseC="No. That gives a purple or magenta color."optionD="green and blue"responseD="No. That gives a turquoise or cyan color."// EDIT ABOVE THIS LINEvar selectionfunction amIRight(selection){document.getElementById("result").innerHTML=selected[selection]}</script><style>span{margin:6px;font-size:20px;padding:4px;}.button{width:50px;height:50px;border-radius:12px;margin:6px;font-size:24px;padding:4px;text-align:center;}</style><div style="border-radius:20px;border:solid black 3px;font-size:20px;padding:16px;background-color:white;font-family: Arial, Helvetica, sans-serif;"><div id="theQuestion"><br><br></div><br><input type="button" class="button" value="A" onClick="selection=0;amIRight(selection)"><span id=spanA></span><br><input type="button" class="button" value="B" onClick="selection=1;amIRight(selection)"><span id=spanB></span><br><input type="button" class="button" value="C" onClick="selection=2;amIRight(selection)"><span id=spanC></span><br><input type="button" class="button" value="D" onClick="selection=3;amIRight(selection)"><span id=spanD></span><br><br><span id="result" style="color:blue;font-weight:bold;"></span></div><script>document.getElementById("theQuestion").innerHTML=questiondocument.getElementById("spanA").innerHTML=optionAdocument.getElementById("spanB").innerHTML=optionBdocument.getElementById("spanC").innerHTML=optionCdocument.getElementById("spanD").innerHTML=optionDselected = [responseA,responseB,responseC,responseD]</script>4. Give a hint?
4. Give a hint?
This example swaps the text each time it is clicked.
Either:
- Copy the code below and paste into an embed section on your page and then edit the code to set your text and colors
- Or, click the link below to edit your text and preview it by clicking the Run button before copying and pasting into an embed section.
https://editor.primary-apps.com/googlesites-interactive4.html
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet"><style>p{border-radius:20px; width:90%;font-family: 'Mansalva', cursive;font-size:40px;color:white;text-align:center;padding:16px;}</style><script>///// EDIT THE VALUES BELOW //////preAnswer="Click here for a hint."answer="All the angles add up to 360 degrees."backgroundColor="green" //edit background colortextColor="lightblue" //edit text color///// EDIT THE VALUES ABOVE //////</script><p id="tell" style="color:yellow" onClick=swap()></p><script>track=1document.getElementById('tell').innerHTML=preAnswerdocument.getElementById('tell').style.backgroundColor = backgroundColordocument.getElementById('tell').style.color = textColorfunction swap(){if(track==1){document.getElementById('tell').innerHTML=answer}else{document.getElementById('tell').innerHTML=preAnswer}track=(track*-1)}</script>