0

I am a teacher and have had a lot of fun learning how to code solutions to the problems I have. This is a fun project idea - I want to be able to insert little videos or gifs into class at a keystroke. I have a PI and monitor on a cart in the front of my room. I am not sure how to get started with a project like this.

On the PI I have a rails server set up to generate random student names already and would like to continue using that also, but I may need to dedicate the pi to this new project.

I have gifs in a folder, how can I map them to play for a while when I hit a key that is mapped to them?

For example, if someone gets an answer:

-right ... D=dunk.gif
-wrong ... F=faceplant.gif

1

I would suggest that you host a web page that can load these gifs up for you. You could use javascript to hide / show different gifs that are in your /images directory:

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert('hi.');
    }
});

What I recommend is that you time the gif's so they only play once, since they seem to repeat, also they are different lengths so you want to make the delay a variable. Here is a basic solution:

 <html>
 <head>
    <style>
       .dunk {
           visibility: hidden;
       }
       .faceplant {
           visibility: hidden;
       } 
       .centered {
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }
    </style>
    <script>
       function showElement(name, delay) {
           var element  = document.getElementsByClassName(name)[0];
           element.style.visibility = "visible";
           setTimeout(function(){ element.style.visibility = "hidden"; }, delay);
       }

       document.addEventListener("keypress", function(event) {
           //http://ee.hawaii.edu/~tep/EE160/Book/chap4/subsection2.1.1.1.html
           //alert(event.keyCode);
           switch (event.keyCode) {
               case 100:
                   showElement("dunk", 3000);
               break;
               case 102:
                   showElement('faceplant', 3000);
               break;
           }
       });
    </script>
 <body>
    <div class='dunk centered' >
       <img src="images/dunk.gif">
    </div>
    <div class='faceplant centered'>
       <img src="images/faceplant.gif">
    </div>
 </body>
</html>
  • You rock. I already have a site running on the screen anyway, Is there a way that they could be unhidden and be centered on the screen no matter how much I have scrolled down? – mrjohnsonsci Oct 14 '17 at 1:17
  • No worries! That's what the community is for. I added the centering into the answer above. My wife is a teacher as well and she LOVES this idea :) – Quintin Balsdon Oct 14 '17 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.