readingtext picture, front or behind?

10 views
Skip to first unread message

hennyj...@planet.nl

unread,
Feb 23, 2021, 3:41:34 AM2/23/21
to hotpotat...@googlegroups.com

Dag Martin,
I include here 3 screenshots to explain something I cannot lay my finger on.

In screenshot 1 the situation is normal. Normal size with a normal appearance of a picture in the left container.
But if I make the screen smaller (red arrow) the picture disappears behind the right container.  (screenshot 2)

If I do the same thing wit a Jmatch exercise,   the picture comes in front of the right container.  (screenshot 3) What did I do to have that? I prefer the picture that way. How can I manipulate Jquiz, to get it there as well?
I teach nowadays with ZOOM and that means that often it is necessary,  to make the screen smaller.
Hgv, Henny

schuifprobleem.01.jpg
schuifprobleem.02.jpg
schuifprobleem.03.jpg

Agnès S.

unread,
Feb 23, 2021, 4:31:40 AM2/23/21
to hotpotat...@googlegroups.com
Hi Henny,

You could add:
img{
max-width: 100%;
height: auto;

}
in hp7.cs_ file.
If the image is too large the width of the image will be adapted to the
container.

Cheers,
Agnès S.
> --
> You received this message because you are subscribed to the Google
> Groups "hotpotatoesusers" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesuse...@googlegroups.com>.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/hotpotatoesusers/001801d709bf%24b1136200%24133a2600%24%40planet.nl
> <https://groups.google.com/d/msgid/hotpotatoesusers/001801d709bf%24b1136200%24133a2600%24%40planet.nl?utm_medium=email&utm_source=footer>.

Martin Holmes

unread,
Feb 23, 2021, 10:23:42 AM2/23/21
to hotpotat...@googlegroups.com
Hi Henny,

Instead of setting the picture size using pixels, which fixes it and
means that it can't shrink as the window shrinks, you could do this:

<img style="width: 80%; margin-right: auto; margin-left: auto;".../>

Hope this helps,
Martin

henny jellema

unread,
Feb 25, 2021, 9:38:10 AM2/25/21
to Martin Holmes, hotpotatoesusers
Dag Martin,
I don't get this to work:

<img style="width: 80%; margin-right: auto; margin-left: auto;".../>
suppose the name of the picture is " image.01" Where exactly do I write this code?
Apart from this:  I like this very much:
But I have no idea how I did this.  I would love to have it in Jquiz also.
Hgv, Henny



hgv, Henny



Op di 23 feb. 2021 om 16:23 schreef Martin Holmes <mho...@halfbakedsoftware.com>:
To unsubscribe from this group and stop receiving emails from it, send an email to hotpotatoesuse...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/hotpotatoesusers/d3865ceb-d2dc-c0a5-a8a6-0a67fcf513f7%40halfbakedsoftware.com.


--

Martin Holmes

unread,
Feb 25, 2021, 10:30:07 AM2/25/21
to hotpotat...@googlegroups.com
Hi Henny,

I would do this:

<img src="plaat.B.jpg" style="max-width: 80%;height: auto;margin-left:
10%;margin-right: 10%;" width="900" height="718">

Cheers,
Martin

On 2021-02-25 6:37 a.m., henny jellema wrote:
> Dag Martin,
> I don't get this to work:
> <img style="width: 80%; margin-right: auto; margin-left: auto;".../>
> suppose the name of the picture is " image.01" Where exactly do I write
> this code?
> Apart from this:  I like this very much:
> https://static.digischool.nl/oefenen/hennyjellema/kunst/regentessen/fragmenten/matchen.01.htm
> <https://static.digischool.nl/oefenen/hennyjellema/kunst/regentessen/fragmenten/matchen.01.htm>
>
> But I have no idea how I did this.  I would love to have it in Jquiz also.
> Hgv, Henny
>
>
>
> hgv, Henny
>
>
>
> Op di 23 feb. 2021 om 16:23 schreef Martin Holmes
> <mho...@halfbakedsoftware.com <mailto:mho...@halfbakedsoftware.com>>:
>
> Hi Henny,
>
> Instead of setting the picture size using pixels, which fixes it and
> means that it can't shrink as the window shrinks, you could do this:
>
> <img style="width: 80%; margin-right: auto; margin-left: auto;".../>
>
> Hope this helps,
> Martin
>
> On 2021-02-23 12:41 a.m., hennyj...@planet.nl
> <mailto:hennyj...@planet.nl> wrote:
> > Dag Martin,
> > I include here 3 screenshots to explain something I cannot lay my
> finger on.
> >
> > In screenshot 1 the situation is normal. Normal size with a normal
> > appearance of a picture in the left container.
> > But if I make the screen smaller (red arrow) the picture disappears
> > behind the right container.  (screenshot 2)
> >
> > If I do the same thing wit a Jmatch exercise,   the picture comes in
> > front of the right container.  (screenshot 3) What did I do to have
> > that? I prefer the picture that way. How can I manipulate Jquiz,
> to get
> > it there as well?
> > I teach nowadays with ZOOM and that means that often it is
> necessary,
> >   to make the screen smaller.
> > Hgv, Henny
> >
> > --
> > You received this message because you are subscribed to the Google
> > Groups "hotpotatoesusers" group.
> > To unsubscribe from this group and stop receiving emails from it,
> send
> > an email to hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesusers%2Bunsu...@googlegroups.com>
> > <mailto:hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesusers%2Bunsu...@googlegroups.com>>.
> <https://groups.google.com/d/msgid/hotpotatoesusers/001801d709bf%24b1136200%24133a2600%24%40planet.nl?utm_medium=email&utm_source=footer
> <https://groups.google.com/d/msgid/hotpotatoesusers/001801d709bf%24b1136200%24133a2600%24%40planet.nl?utm_medium=email&utm_source=footer>>.
>
> --
> You received this message because you are subscribed to the Google
> Groups "hotpotatoesusers" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesusers%2Bunsu...@googlegroups.com>.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/hotpotatoesusers/d3865ceb-d2dc-c0a5-a8a6-0a67fcf513f7%40halfbakedsoftware.com
> <https://groups.google.com/d/msgid/hotpotatoesusers/d3865ceb-d2dc-c0a5-a8a6-0a67fcf513f7%40halfbakedsoftware.com>.
>
>
>
> --
> www.hennyjellema.nl <http://www.hennyjellema.nl>
>
> --
> You received this message because you are subscribed to the Google
> Groups "hotpotatoesusers" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to hotpotatoesuse...@googlegroups.com
> <mailto:hotpotatoesuse...@googlegroups.com>.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/hotpotatoesusers/CAN8zJe7e7fBa2KO1mW2aJmhJczLVDSafq9jn-t-zhZiaY%2BxoVA%40mail.gmail.com
> <https://groups.google.com/d/msgid/hotpotatoesusers/CAN8zJe7e7fBa2KO1mW2aJmhJczLVDSafq9jn-t-zhZiaY%2BxoVA%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Agnès S.

unread,
Feb 25, 2021, 11:55:11 AM2/25/21
to hotpotat...@googlegroups.com
Hi Henny,

Martin's solution is perfect. You must write it instead of
<img src="plaat.B.jpg" width="900" height="718" style="display: block;
margin-left: auto; margin-right: auto; text-align: center;"/>
when you create the exercise.

matchen.01.htm has been created with:
<img class="rttoenlarge"src="plaat.B.part.lo.jpg" width="127" height="100"/>
etc.

and
img{
vertical-align: middle;
text-align: center;
transform: scale(1);
transition: 1.5s ease-in-out;
}

img.rttoenlarge:hover {
transform-origin: top left;
transform: scale(3);
position: relative;
z-index: 1000;
}
added in Options>Configure output>Custom>Code for insertion into head tag .

Cheers,
Agnès S.

henny jellema

unread,
Feb 25, 2021, 2:41:04 PM2/25/21
to agnes...@gmail.com, hotpotatoesusers
Dag Agnes,
Oh yes, this  "rttoenlarge"  I know. You learned me that earlier last week and it works perfect!  
But this is something different. 
Here
the picture in the reading text area comes in front of the right container when I make the webpage smaller.
And here:
https://static.digischool.nl/oefenen/hennyjellema/kunst/regentessen/fragmenten/stukjes.01.htm 
the picture in the reading text area  disappears behind this right half of the exercise.  And my question is, can I manipulate this or is it in these two exercises sheer coïncidence?
Meilleures salutations!
Henny







Op do 25 feb. 2021 om 17:55 schreef Agnès S. <agnes...@gmail.com>:
To unsubscribe from this group and stop receiving emails from it, send an email to hotpotatoesuse...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/hotpotatoesusers/47218a0a-0439-5f6e-610d-b7f7939496f5%40gmail.com.


--

henny jellema

unread,
Feb 26, 2021, 2:55:19 AM2/26/21
to agnes...@gmail.com, hotpotatoesusers
Dag Agnes,
Excusez-moi! 
I discovered that I made another completely different mistake... which I confused with ... 
Now I made more or less coïncidently what I want. 
Well, enfin. Thank you very much for all the time thinking with me.  
Hgv, Henny


Op do 25 feb. 2021 om 20:40 schreef henny jellema <hen.j...@gmail.com>:


--
Reply all
Reply to author
Forward
0 new messages