Today’s code is something a little different. It is focusing upon the quiz template only. If you are looking at adding some color to personalize your app to suit your branding, then add this code into your app. In order to add this customized code, go to your AppsGeyser dashboard, click on ‘Edit’ and go to the ‘Advanced Edit ‘page. Add the code at the bottom of the ‘Advanced Edit’ tab.
Today’s code will help you add your branding needs to your quiz.
var colors = ["BurlyWood", "LightGreen", "LightPink"]; /* Enter a list of colors */
var themeWrapper=document.createElement("div");
themeWrapper.style.position="absolute";
themeWrapper.style.width="100%";
themeWrapper.style.bottom="10px";
var themeBlock=document.createElement("div");
themeBlock.setAttribute("class","start_button");
themeBlock.style.width="25%";
var themeText= document.createTextNode("Theme");
themeBlock.appendChild(themeText);
themeWrapper.appendChild(themeBlock);
document.getElementById("intro_screen").appendChild(themeWrapper);
var state =1;
function changeTheme(color){
document.getElementById("intro_screen").style.backgroundImage='none';
document.getElementsByTagName("html")[0].style.backgroundImage='none';
document.getElementById("intro_screen").style.backgroundColor=color;
document.getElementsByTagName("html")[0].style.backgroundColor=color;
}
var i = 0;
themeBlock.onclick=function(){
i = i + 1;
i = i % colors.length;
changeTheme(colors[i]);
};
To upload the code, please click on’Edit’.
Then click on ‘Advanced Edit’.
Scroll to the bottom and add in your customized code.
This is what the app will look like before and after:
We wish you the best of luck with your app, and hope that you enjoy adding in customized code to your app.
Appsgeyser will be adding more codes over the coming few weeks. Don’t forget to come back and learn some more.
*codes are not available on every template. Please check the advanced edit section to see if the coding area is open. Today’s code is for the QUIZ template only