We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Mix E-learning with 3D visual?

Home Forums Puzzles Mix E-learning with 3D visual?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #57200
    adgo
    Participant

    I’m working on a project that’s basically the Scooter example you guys have.

    You click a button and the camera tweens around a modell of a truck while annotations pop up at the same time.

    My question is:
    Is it possible to sort of mix the Scooter example with the E-learning example?

    I would like to add a button that tweens the camera towards a part of the truck modell and have an animation start with steps and timeline bar etc.

    Is that possible? Any tips on how I would go about to do it?

    Thanks in advance for your help!

    #57202
    xeon
    Customer

    Yes it’s fully possible. You need to make some decisions up: are you going to allow branching, do you need this to be SCORM compliant, do you need analytics, do you need to store user progress, do you need to report user progress, do you need to keep a score or generate a certificate of completion, do you need to store any of this data in a database?

    One of the simplest examples of E-learning is a demo we created. https://webgl.r66dapps.com/starpuzzle/

    I would suggest starting by creating a script with functional requirements at each step. Defining what functions are persistent and which are unique to a step. Once you do that you have a general plan on how to build the project.

    Next decide on what devices, OS,s and browsers you are wanting/needing to support. This will help you determine what level of responsive design you need to consider and help you with your UI.

    Creating a timeline bar is just a graphic that grows by step.
    Consider a 10 step sequence. Then you can create a line with 10 line segments. You turn on one line segment at a time as they advance or turn off as they rewind your script.

    Good luck.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    #57252
    adgo
    Participant

    Great advice!

    Any suggestions on websites where I can read more about how to do every step you mentioned and that perhaps also includes examples? :)

    #57370
    adgo
    Participant

    Anyone have any links to websites where I can read about how to do the things that were suggested to me? :scratch:

    #57440
    xeon
    Customer

    Hi Adgo,
    I have not found any links that help with a V3d project.

    So here are some steps you can follow with a bit more detail on how we start any project to determine how best to build it.

    Discovery
    This is where we determine what the project is really about.
    We get a list of customer requirements or our own requirements if its our internal project. We typically write this down in a google doc or something that can be shared and collaborated on by the wider team.
    Here is a brief list of the starting questions:
    When is the project due to be in production?
    When is the project due for a dry run, legal review etc.
    How many review points are needed.
    Will the content be provided or created?
    What devices are desired that the app work on?
    What browsers are desired that the app work on?
    What resolutions and orientations are required?
    If the client has an IT department what are the steps and needs to deploy?
    What LMS will your app be integrated into?
    This question is extremely important because you will need to be sure you can build an app that will integrate before you do any of the rest.
    How many languages will be supported?
    Is it SCORM compliant?
    Does the data need to integrate with another system?
    Are analytics needed?
    Will the questions be branched or linear?
    Will there be A/B testing?
    Is a backend service required to adjust or modify questions / content once the system is released?

    Once you get past these basic questions you can dig into the next level of what the app will do.

    Who is the app for? What age group and or gender?
    What is the environment and situation that the app will be used in?
    (business indoors, military soldier night/day in combat, construction day night with gloves…etc.)

    Next comes…the project outline. Simple google doc.
    This document is the precursor to the copy doc but will detail all the sections that are needed. If you have done one for a website you will find they are the same sort of thing.

    Preloading Screen
    – is there a video, static image, or loading bar?
    Home Screen
    – background:
    – menu
    – Topic 1:
    – Topic 2:
    – Topic N:
    – About Us
    – Contact Us
    – Help / Instructions

    For each of the above you will need to determine what is each section and outline those sections.

    Once you have an idea of the content you can then outline a navigation menu.

    Navigation
    – menu button
    – full-screen button
    – sound on/off button
    – etc.

    Progress Window (persistent on screen)
    – Step Count
    – progress bar
    – forward and back buttons

    With any step-by-step procedural guide you will need to have those steps. Typically the client provides a users manual or other reference to follow. In some cases you will have to write them out in detail. You should list the steps in an outline something like:

    Step 1:
    – Content: image/ video / 3D model
    – Actions: what items are clickable and what happens
    – Buttons: Any new or specific buttons that have to be added to UI
    – Requirements to move to the next step: Detail out what has to happen to get to know what the user has to do to get to the next step.
    – Help / Hints: Decide what level if any will be given to the user if they are stuck and what constitutes being stuck.
    – Define the copy. From header text to body copy this should be fully defined so that you can ensure all the Actions and Buttons are defined.

    With respect to making a step by step progress bar:
    You can do this in your 3D app of choice.
    Once you know the number of steps assign each step a percentage of completion. You can do this either linearly by step number or by the amount of content in a section. Example: A 4 step process could be 4 steps of 25% completion each or …it could be Step 1: 10%, Step 2: 30%, Step 3: 40% and Step 4: 20%…as long as the total reaches 100% on the last step you are good. The idea is you can create a rectangle or shape the represents the % completed for each step. If you want a line you would have 4 rectangles that when displayed add up to 100%.
    You will can attach these rectangles to the camera so they are in persistently in view and then hide/unhide them as the user progress.
    After completing step 1 and entering step 2. You unhide the first rectangle..thus showing progress.

    If you need more info please feel free to contact me at xeon@r66d.com

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.