cancel
Showing results for 
Search instead for 
Did you mean: 
Adventurer II

Dropdown Box width in Quiz

Jump to solution

We make a lot of use of Multiple Answer quiz question and often in quite clever-ish ways.

Often teachers will use them inside text boxes when doing labelling tasks.

The problem is that the width of the text box does not change with the text inside and as a result you get question layouts that don't reflect the initial design eg

227851_pastedImage_1.png

And to illustrate my point about not reflecting what is in the text box:

227876_pastedImage_2.png

The design of this question has also changed as originally we had the 5 pictures in one row (the pictures themselves are 60pixels wide.

Is there anyway we can reduce the [Select] box width?

1 Solution

Accepted Solutions
Adventurer II

ANSWER BELOW

OK, I dont know a huge amount about CSS but I've got time on my hands so I thought I would try to find out how to sort this myself.

Bear with me, here it is in lots of steps..but before we start, just to let you know that I have access to our CSS file, which is all important!

1. I made an example of a multiple select question making sure I also included an answer that was much longer than the others:

   344000_pastedImage_3.png 

2. I went to Preview to preview the question and right clicked on a space nearby

3. I clicked on the box to select it (in blue)

4. I then right clicked on it to get a drop down menu and selected Inspect (I am using Google Chrome)

344001_pastedImage_5.png

5.   I then got a whole page of html stuff (very scary!) but highlighted in the middle was the question code:

344002_pastedImage_6.png

6. I then looked over at the right hand part in the Styles selection to see the settings:

  344003_pastedImage_7.png

7.  I checked that this was the correct setting by clicking inside it and altering the width (which also allowed me to see what final width I wanted)

344004_pastedImage_8.png

8. I could then close the html page and check to see if this width was suitable:

344005_pastedImage_9.png

9. I was pleased to see that the dropdown box width remains the same!

10. Next it was time to copy the code into the CSS style file.

11. Through some YouTube videos I realised that the CSS change for this is just:

344009_pastedImage_10.png

12. Apparently the /* after makes sure the width remains constant whatever browser you use.

13. I downloaded the stylesheet from our Canvas - How do I upload custom JavaScript and CSS files to an account? 

14. I added this to our stylesheet with a reminder what it was:

  344010_pastedImage_11.png

15.  I then uploaded it back - How do I upload custom JavaScript and CSS files to an account? 

16.  I then altered the Space question back to have the answers on one row (see above)

344011_pastedImage_14.png

17. When I tried out the quiz as a student it worked:

344015_pastedImage_15.png

18. So no more (hopefully) pictures like this:

344016_pastedImage_2.png

So, feeling mildly pleased with myself for being able to do this.

On reflection, I am left with a sense of frustration. As it turned out, this did not require a major development from Canvas just a change in the CSS file. I wonder how many similar questions are out there that would be answered and solved with some tweaks to styles? It is frustrating that without expert technical support and advice, that many small issues which turn out to be BIG ONES never get resolved. 

I posted this question 3 years ago and did not follow it up until now which is thanks to djarrow@wyasd.k12.pa.us for reminding me. The Canvas Community is wonderful and probably the most responsive community I have ever been a member of. Hope this helps klaing@sgul.ac.uk and robert.byng@cabarrus.k12.nc.us and mike.wilson@djarragun.qld.edu.au going forward. Its not a dynamic change of width (don't know how to code this) but it has solved a major headache for me.

PS. I am no coder so I hope what I have done has not caused issues elsewhere - if anyone knows, please chip in!

View solution in original post

11 Replies
Community Coach
Community Coach

Gideon.Williams@britishschool.nl,

Unfortunately, this is not an editable option within the quiz tool.  Have you happened to jump into the https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=bcd9406a-de57-4f05-a8e6-...‌ group and see if they have any recommendations for you?  The next option would be to contact Instructure Support, but this might be a pay for feature from Professional Services.

Robbie

Community Coach
Community Coach

Hello Gideon.Williams@britishschool.nl‌...

I thought that I would check in with you because there hasn't been any new activity in this discussion topic since you first posted this question and then received a reply from rogrant@nmsu.edu‌ a few days later.  Have you had an opportunity to review Robbie's response?  If so, did it help to answer your question?  Or, are you still looking for some help with your initial question?  If you feel that Robbie's response answered your question, please feel free to mark it as "Correct".  However, if you are still looking for some help with this question, please come back to this thread and post an update so that members of the Canvas Community can continue to help you.  Because we've not heard from you for quite a while and because there hasn't been any new activity here since the middle of April, I am going to mark your question as "Assumed Answered".  This won't prevent you or others from posting additional replies below, though.  I hope this is okay with you, Gideon.  Looking forward to hearing from you soon!

Community Member

Like Gideon I have used this kind of thing alot in the past in other VLEs. Is there no work around for this, its incredibly limiting and effectively means tables with multple drop downs or fill ins in rows are a no no.WHich means I'm going to have to totally re-write questions - NOT happy at the prospect and not great for the students.

The width of the drop down should dynamically adjust or at the very least be editable. If the the width of the quiz panel wasnt so narrow then this wouldn't be quite so limiting.

Ditto. Quiz box length is too narrow and the drop down box should size dynamically with the answer choices.

Also Ditto

This is what my Punnett Square quiz turned out like. Mucked around with it but no luck.

Punnett Square Leakage

Not Happy

What makes matters 'worse' is that there is no comparable feature in Quizzes.next!

Community Member

Has there been any progress made with this?  I am dealing with the same thing with trying to balance equations.  The dropdown box is so long, even though the text is just one number.  

Sadly my idea was archived with a grant total of 1 vote, which may have been mine!