Hello Aditya,
Something like this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $(".formulation").css("background-image", "url('https://qa.moodledemo.net/draftfile.php/26/user/draft/637730801/Moodle%20is%20the%20worlds%20best%20LMS.png')"); }); </script>Reference: https://www.w3schools.com/html/html_images_background.asp ↗
Hi Dominique,
Thanks for providing further steps. I tried to replicate them as it is but still not working for me. Not sure what is the issue.
Please see the attached image (added screen shots of two separate UI screen of Moodle- quiz and html block is the upper one and lower right side is showing file uploaded in private files).
I have tried to show the html block, image url and where I have uploaded the logo file under Private files.
'https://exams.curizent.com/draftfile.php/user/files.php/curizentlogo.png'
Please help!!
Regards,
Aditya Joshi
Hello Aditya,
It looks like the code is not in the HTML of the HTML block. To put the code in the HTML using the Atto editor, say, follow these steps:
Note that this procedure is not specific to the HTML block. The same goes for any text field in any activity, using the Atto editor.
Thanks a Dominique. You caught it. I followed your steps and now able to show logo on quiz question.
Issue 1:
But it not coming as background image and covering whole question. Please see attached image.
Issue 2; Using image in private file
Also, I am still not able to figure out how to use the logo or image available in moodle private files.
'https://qa.moodledemo.net/draftfile.php/26/user/draft/637730801/Moodle%20is%20the%20worlds%20best%20LMS.png')
I am not able to understand what is draftfile.php/, 26 and draft/637730801 ?
I can see the url of my private file- https://exams.curizent.com/user/files.php
So, I tried-
or
https://exams.curizent.com/draftfile.php/user/files.php/curizentlogo,png
Not sure what to use.
Thanks for all your help, I feel I am almost there. Please help to achieve this.
Regards,
Aditya Joshi
Aditya,
You can place the image anywhere you want. If you put it in the "body", you will get something like what is shown below.
<script>
$(document).ready(function() {
$("body").css("background-image", ...
To get the URL of an image from the Private files, simply insert the image using the "Insert or edit image" button in the Atto editor menu. Then you can copy the URL into the script.
In fact, I didn't quite understand what exactly you want to achieve. Anyway, here's another suggestion:
...
$(document).ready(function() {
$("body").css("background-image", "url('https://... png')");
$("body").css("opacity", "0.75");
...
Hello Aditya,
If you look closely for example at "c. football" in you screenshot, you will see that the logo is indeed in the background.
Use a logo that is a little lighter than normal so that the question text remains readable when it covers the logo.
If you use the Boost theme, place the following CSS in Site administration / Appearance - Themes / Boost / Advanced settings - Raw SCSS:
.formulation {
background-image: url('http... Private files...png');
background-repeat: no-repeat;
background-position:center center;
}
Hi Dominique,
Thanks again for your inputs. I am able to add file and get url for image. I followed your instruction- insert or edit image in HTML box and then actually I have uploaded the logo image there. Somehow, it was not able to see any file in Private Files folder. When I uploaded new file through insert method, it gave me url also.
latest code you have provided is the best thing, now I have only one image on each question.
I guess, I have to use much lighter image. Please see the screenshot attached. current image is covering question text, not sure if it is really going in background or maybe image is like that.
How your last post image is showing logo really in background?
I don't want to use body function as it is giving logo image everywhere on the page.
Is there way to use opacity with .formulation. I actually tried also but it is then applied to whole question text-
.formulation {
background-repeat: no-repeat;
background-position:center center;
opacity: 0.5;
}
This impacts whole question text and image, not just logo image. I have modified the opacity to 1.0 (for the example attached with this post).
This is my HTML block code in use-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".formulation").css("background-image", "url('https://exams.curizent.com/draftfile.php/5/user/draft/947842291/Curizent%20Logo%20file.png')");
});
</script>
Any help please on making the image really in background or adding opacity with current code (using .formulation). I have tried opacity with body and it worked but as I said earlier using body function added logo images on entire page which is not desired.
Regards,
Aditya Joshi
background-size: contain;Use a light-colored (high brightness) image like the one attached below.
Hi Dominique,
Finally, I am able to achieve what I initially thought.
See the attached screenshot. I am now using very light image. I don't want students taking quiz to distract due to background image but at the same time, it is ensuring if someone takes picture of question, at least my branding goes with that.
Let me know your thoughts as how it is looking now.
Question: font color and size for quiz question and options:
how I can change font of quiz question and answer options. Thinking to make them little black so that student will be able to see them more clearly and background image will not distract at all.
Thanks for all your help, it would have impossible for me to get it done without your help.
Regards,
Aditya Joshi
Hello Aditya,
If you want the characters to be darker not only in the quizzes but also throughout your site, you can redefine the color of the characters in Site administration / Appearance / Themes - Boost / Advanced settings / Raw SCSS. Just add the following code to get black characters (#000):
span,p,div,th,td,li {
color: #000;
}
Hi Dominique,
I found a strange issue. the logo behind quiz appearing when I try the quiz as admin but when I tried with some student login, there is no logo image behind quiz questions.
Please see the screen shot.
Please help. I am not able to get that how come background image is gone for student login.
Regards,
Aditya Joshi
Hi Dominique,
I cleared the browser cache, tried on another browser as student but still not working.
There is something missing for sure. I tried the whole process with one small quiz of 3 questions and strangely both admin and student login can see the background image.
But with another quiz with 50 questions, only admin able to see the image.
One thing I noticed with comparison to small quiz is that HTML block was visible to both admin and student attempt. But the same is not with the bigger quiz.
Please see attached screenshot. I can see HTML block with script to have background image when admin attempting the quiz but the same is not visible when student attempt the quiz.
Regards,
Aditya Joshi
adding screenshot of another small quiz. both admin and student attempt can see HTML block and background image
Regards,
Aditya Joshi
