Help needed with simple online interactive "tutorial" please

Discussion in 'Web Design and Development' started by gdw4uk, Mar 11, 2008.

  1. gdw4uk macrumors newbie

    Joined:
    Sep 19, 2007
    #1
    Hi,
    At this moment in time, I just need a nudge in the right direction, although I may need some more detailed input at some point in the future.

    I'm learning to fly. Among the many things I have to do, I have to learn long lists of checks at various stages in the flight (start-up, pre-take off, pre-landing etc.) I have the lists of these checks and I also have an accurate picture of the cockpit (on paper, but this can be scanned in).

    Rather than having to sit there and keep checking the lists as I look at the paper cockpit, I'd love to be able to construct a web-based interactive tutorial where essentially I have to click on the right instruments or controls in the correct order. If I'm right, I can continue, if I'm wrong, I get an error message. That's it in it's simplest format (a text box with a description of each 'check' as it was clicked would be good too), it could get more complicated with dials changing/controls moving/switches moving on/off etc with time, but for now, that would really help getting the lists in my mind.

    I thought javascript would be the best way, but since I don't have any experience with programming, I was hoping someone might be able to suggest the best way and point me in the right direction to get started...

    With thanks in advance for any help!

    Grant
     
  2. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #2
    for this, flash is your best bet, especially considering you haven't programmed before. Flash is pretty easy to use for this stuff.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Well if you use an image of the controls, you can create an image map over the top of it to create clickable areas. On the JavaScript side, you can create an array that would hold all of the checklist items in the order they need to be clicked. Below is a simplified bit of code to get you started. I didn't provide anything on image maps though, but you can do some searches on those.

    JavaScript:
    Code:
    var checklist = new Array('Flaps', 'Fuel');
    var spot = 0;
    
    function CheckIt(x)
    {
      // Check if right
      if (x == spot) {
        document.getElementById('output').value = checklist[spot];
        alert("Correct");
        spot++;
      }
      else {
        alert("Wrong");
      }
    }
    
    HTML (example only):
    HTML:
    <p><a href="#" onclick="CheckIt(0); return false;">check 1</a></p>
    <p><a href="#" onclick="CheckIt(1); return false;">check 2</a></p>
    <textarea id="output"></textarea>
     
  4. gdw4uk thread starter macrumors newbie

    Joined:
    Sep 19, 2007
    #4
    Thanks

    Great, that's really helpful. I'll have a play around and see what I can come up with! :)
     

Share This Page