Making text to flow around image in quiz text box

mlapl1
mlapl1 Community Member Posts: 349 ☆ Roadie ☆
There is something obvious I must be missing but...

I have a multiple choice test question - there is a textbox. Inside the textbox I want to put some text and an image. I would like the text to flow around the image in the same way that it might do so using a standard editor like TinyMCE. However,  I am unable to do so and I cannot find any way of specifying the text alignment around the image. I cannot believe that this is not possible to do in some simple way... so there must be something I am missing. I have looked everywhere I can think of.

Thanks for any thoughts

Andrew

Comments

  • klaatu
    klaatu Community Member Posts: 988
    Add the graphic to the text box like normal. Get the graphics HTML ID. Add an external style sheet and float the graphic to which ever side you want. In the attached example I also added some padding to the graphic and some line height to the text. Hope this helps.

    Darrel
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thank you so much Darrel. I have not looked yet but I am sure it is correct. I did not think of an external style sheet associated with the HTML id. I was more expecting the usual wysiwyg approach.

     
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    Dang it @klaatu - you beat me to it! My solution differed slightly, in that I used a RunJS to the image on Page Show with samples of how positioning the text in the text box affected wrapping. I also added buttons to change the float and resize the image as examples. I had the CSS idea in there, too.
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Hi Darrel (@klaatu) - just had a look but flow.css is missing :(

    Would you mind re-sending please?

    Thanks a lot
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thanks so much <span class="handle-sign">@&lt;/span>JasonADal ... I will take a look too - I feel very lucky getting help from the two of you.
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Looks great Jason. Thank you!
  • klaatu
    klaatu Community Member Posts: 988
    I think its in the original zip. textFlow.css. I'll send it again.

    This is all that's in it:

    #image259Img {
    float:left;
    padding: 0 10px 0 0;
    }

    span.text42Font2 {
    line-height: 1.2em;
    }

    Jason, it's cool to see how much you have progressed! You're one of the most prolific responders to posts helping people. I've sort of moved on from Lectora but like to visit the forum, especially when I get email notifications of posts from good people, like Andrew, that I've followed.

    Andrew, the recent posts with the audio player gave me deja vu. At some point, although Lectora's implementation of mediaElement.js is pretty good, when it comes to doing anything outside the built-in functionality and/or styling I would opt to build outside of Inspire and import or embed. This way you have total control without fighting unnecessarily complicated multi-layered code.
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thanks Darrel for this code and also for all of your help and good advice. This is not my "real job", not yet anyway, and to have generous people such as you and Jason (and Timk and Math and Sergey when he was around more, not to mention Jenny too) is truly truly wonderful. A lovely team of people. Thank you all!
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    @mlapl1 -  Interestingly enough, I found my own use of this idea in some tweaks I'm making, so thanks for asking the question! It inspired some ideas and design changes that will definitely help with some screen reader hiccups I've run into.

    @klaatu - I really appreciate the encouragement, and you've been quite instrumental in getting me here. Seeing others' questions and responses, like with this thread, push me to try and learn. I hope you're well and that you don't abandon us completely ;-)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    As Jasons states... this kind of questions indeed trigger experimentation. I tried to get something like these working in Lectora with a plain textbox. https://codepen.io/dudleystorey/pen/FvJDB
    https://www.html5rocks.com/en/tutorials/shapes/getting-started/
    Sadly enough at some point i discovered that CSS shapes as used here arenot supported in all browsers. So continue the search for another solution for a real text flow in Lectora.
    Found a Javascript based solution for it, didnot get it working in Lectora yet...but will soon...
    This library works on all browsers, so i should be able to get this working..
    http://www.jwf.us/projects/jQSlickWrap/

    Do check this one in every browser:
    http://www.jwf.us/projects/jQSlickWrap/example1.html
  • klaatu
    klaatu Community Member Posts: 988
    Math, I look at caniuse weekly to see if Firefox and Micro$oft have implemented CSS Shapes. I don't know why its taking them so long but it will be almost as big as grid when they do.

    Jason, I'm well, thanks. I'm not planning on totally leaving any time soon. I still have plenty of courses that were built with Lectora so even though I don't turn to it first anymore, I still use it for updates, revisions and additions to those modules. Also, feel free to contact me outside the forum any time you have a question I might be able to help with.