TinSort Tricks in questfox

Tinsort_Example
Users ask us how to manipulate the design in the questfox question type TinSort.
Here are some hints on how to manipulate design features:
You can enlarge or squeeze the overall dimension by changing height and width. It is even possible to go into a new non-rectangle format by manipulating those values.
Everything needs to be transferred into CSS that you can just implement on the question page under
Page Settings – Page Style – Define Custom Project CSS
page_settings_questfoxpasge_style_css_questfox_tinsort
This script helps you to manipulate the size
Overall size
#TinsortImageSize{max-height: 70em;}
Detailed manipulation
 #tinderslide, .tinderslide.wrap{
margin: 0 auto;
height: 16em;
width: 12em;
}
This would allow you to implement a background picture:

#tinderslide > ul > li{
background-image:url(“https://qfox.blob.core.windows.net/user/DigitalFutur/05_screen_backgrounds/blackboard_wallpaper.jpg”;);
}

Manipulating fonts is also possible 
#tinderslide > ul > li> div > div.answerTitle.ng-binding.ng-scope{
font-size:1.5em;
}

 

 

 



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s