Adapt Learning Community: Translation and Nav-link button images

Good day! I am posting again in relation to the translation of courses into another language/s. I was able to apply the language picker and translate my course into other languages. However, I am now stuck with two of my nav-link button images which were not caught by the translation. These buttons are linked to the content_custom.less, and it the background-images are only tied up to the english folder. Is there a way to put a condition as well in the nav-link buttons (e.g. if "en", go to "src/en/images...", if "de", go to "src/de/images...")?

Attached are the images:

image_1.png - content_custom.less

image_2.png - translated version

image_3.png - english version

You could do something like this perhaps?

Show parent | Reply

Inspect your page's HTML tag. You may already have some classes at your disposal that you can use in your CSS. For example, this German translation has a course id (course.json) of "m05-de". It becomes a class on HTML. So this is another technique you can try in addition to the "lang" attribute (`"_defaultLanguage": "de"` in config.json) that Matt points out.

Show parent | Reply

Thanks! Adding some codes for each language did the fix.

.introSection:lang(en) {
.c_intro_p3_left .nav-link-button{
margin-top: 0;
width: 325px;
height: 256px;
background-image: url("../../course/en/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}

.c_intro_p3_right .nav-link-button{
margin-top: 0;
width: 325px;
height:256px;
background-image: url("../../course/en/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;

}
}
.introSection:lang(de) {
.c_intro_p3_left .nav-link-button{
margin-top: 0;
width: 325px;
height: 256px;
background-image: url("../../course/id/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}

.c_intro_p3_right .nav-link-button{
margin-top: 0;
width: 325px;
height:256px;
background-image: url("../../course/id/images/xxx.png");
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
}
}

Show parent | Reply

Another question, can these buttons be reflected in the SCORM report? e.g. if student chooses navlink button A, it will show up in the report that he/she clicked on it.

Show parent | Reply

It really depends what data fields your LMS supports and what reporting capabilities it has. Most only support the bare minimum of SCORM 1.2 i.e. just bookmarking, score, and status.

Show parent | Reply