Archived

Making text to flow around image in quiz text box

February 28, 2018 12:00 AM

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

Discussion (11)

@mlapl1 Author February 28, 2018 12:00 AM

Looks great Jason. Thank you!

@mlapl1 Author February 28, 2018 12:00 AM

Hi Darrel (@klaatu) - just had a look but flow.css is missing :(

Would you mind re-sending please?

Thanks a lot

@mlapl1 Author February 28, 2018 12:00 AM

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.

undefined

@jasonadal February 28, 2018 12:00 AM

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 Author February 28, 2018 12:00 AM

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!

@mlapl1 Author February 28, 2018 12:00 AM

Thanks so much undefinedJasonADal ... I will take a look too - I feel very lucky getting help from the two of you.

@klaatu February 28, 2018 12:00 AM

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

@klaatu February 28, 2018 12:00 AM

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.

@jasonadal March 5, 2018 12:00 AM

@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 ;-)

@klaatu March 5, 2018 12:00 AM

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.

undefined

@mnotermans5114 March 5, 2018 12:00 AM

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

Discussions have been disabled for this post