Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #383177 Score: 1
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    advanced
    10 pts
    @nwilliams3743

    Is there a way to prevent the learner from starting the module until the whole module has preloaded?

    Or even 50% loaded? Having some real lag issues which is really impacting the learning experience.

    The scorm .zip file is 42mb

    I came across this http://www.swiftelearningservices.com/how-to-create-a-custom-preloader-in-lectora/ however it is missing the .css file it refers to, and I’m not entirely sure it actually defines when a module is completely loaded.

    If this cannot be achieved, do most recommend having all items set to preload or not to enhance the speed of the module?

    Thanks

    This post has received 1 vote up.
    #431071 Score: 0
    Profile photo of Brandon Mazy
    Brandon Mazy
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    profile
    wise owl
    contributor
    @bmazy6337

    I’m also wanting a solution for a preloader!!! Any luck with that yet Nick?

    #431207 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    22 pts
    @CarlFink

    With Flash no longer recommended or really supported, preloading entire modules is largely off the table. You can preload major components by some trickery, but that’s about it, as far as I know.

    We have some pretty bad network speeds in some of our locations, and the only real solution seems to be “Don’t use large components.” That is, provide non-video, maybe even non-video and non-audio alternatives.

    #431225 Score: 0
    Profile photo of Brandon Mazy
    Brandon Mazy
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    profile
    wise owl
    contributor
    @bmazy6337

    I had found this site

    https://www.swiftelearningservices.com/how-to-create-a-custom-preloader-in-lectora/

    and at first, it seemed to work. However, after doing some testing I can see that the way at least I have it set up, it’s not. 🙁

    Here is a link to the game, I’m working on. Images and audio are not compressed so I could test it.

    http://www.texasceu.com/examples/game/

    Note: I’ve just started this project so the orange buttons at the bottom are placeholders. I’ve stripped it down to try to resolve this preloading issue.

    After looking at the site I got the preloader from, it appears it works on their demos, so I’m just not seeing something I guess!! 🙁  So close!!!

    Any advice would be appreciated!!!

     

    • This reply was modified 1 week, 6 days ago by Profile photo of Brandon Mazy Brandon Mazy.
    #431228 Score: 0
    Profile photo of Brandon Mazy
    Brandon Mazy
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    profile
    wise owl
    contributor
    @bmazy6337

    Hey Nick,

    Mine has the .css file.. Here is the contents of it! It will not let me upload a .css file for security reasons!! Hope it helps!! 🙂

     

     

    #preloaderhtml {
    z-index: 100000 !important;
    opacity:1;
    }
    .preloader {
    width: 1009px;
    height: 662px;
    background-color: #5b6a6f;
    padding-top: 231px;
    }
    @-webkit-keyframes uil-default-anim {
    0% {
    opacity: 1
    }
    100% {
    opacity: 0
    }
    }

    @keyframes uil-default-anim {
    0% {
    opacity: 1
    }
    100% {
    opacity: 0
    }
    }

    .uil-default-css > div:nth-of-type(1) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    margin: auto;
    }

    .uil-default-css > div:nth-of-type(2) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.4166666666666667s;
    animation-delay: -0.4166666666666667s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(3) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.33333333333333337s;
    animation-delay: -0.33333333333333337s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(4) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(5) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.16666666666666669s;
    animation-delay: -0.16666666666666669s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(6) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: -0.08333333333333331s;
    animation-delay: -0.08333333333333331s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(7) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(8) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.08333333333333337s;
    animation-delay: 0.08333333333333337s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(9) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.16666666666666663s;
    animation-delay: 0.16666666666666663s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(10) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(11) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.33333333333333337s;
    animation-delay: 0.33333333333333337s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    .uil-default-css > div:nth-of-type(12) {
    -webkit-animation: uil-default-anim 1s linear infinite;
    animation: uil-default-anim 1s linear infinite;
    -webkit-animation-delay: 0.41666666666666663s;
    animation-delay: 0.41666666666666663s;
    }

    .uil-default-css {
    position: relative;
    background: none;
    width: 200px;
    height: 200px;
    }

    • This reply was modified 1 week, 6 days ago by Profile photo of Brandon Mazy Brandon Mazy.
    #431249 Score: 0
    Profile photo of Ann Sisco
    Ann Sisco
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    5 pts
    @prg1792

    To be clear, the “preloader” described on that site it just an HTML implementation of an animated “loading” image. It does not actually preload any images; it just covers the screen for a set amount of time giving the rest of the page components additional time to load before the cover fades away. This cover would still appear on the next visit to the page, when the visuals would already be cached. Probably not an ideal user experience.

    #431294 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    22 pts
    @CarlFink

    To force a preload, you could in principle have every graphic, video, sound, and script loaded at the course or lesson level, but invisible because off-screen (out of the viewport). Then on each page, Actions move the graphics and whatnot to their proper position. It would be a lot of work and probably not worth it, but maybe if you have only a few very large items that are causing the problem you could try this for just them.

    #431355 Score: 0
    Profile photo of Brandon Mazy
    Brandon Mazy
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    profile
    wise owl
    contributor
    @bmazy6337

    Thanks Ann!!!!

    Thanks CarlFink!!

     

    I see what you guys are talking about!!! Thanks for the posts!!

    I can compress my data about 85% so I hope that will be good enough for most users!!

    🙂

    B

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.