Visual Differences

Govmiller · November 20, 2012, 10:31pm

Greetings! As some of you may know, I’m working on using ChoiceScript in an educational setting. I’ve hammered out a number of issues, but now I’m stuck… And this won’t be the only time…

I’d like to give my students some visual cues to what they are reading. I’ve got the italic and bold down, but is there a way I can change the font color? And can I change it from scene to scene? Or can I change it within a scene?

A different idea would be to change the background color of the “Next” button at the bottom of the scene. Can I do that within a scene?

Or can I change the title (the gameTitle class in the index.html file) from scene to scene?

And I’ll go ahead and put this out there: I’m willing to pay (some, I’m only a college professor) to have a customized set of files for my educational use. This might mean some specialized tokens/words that would work in my environment, but not in the regular ChoiceScript universe… I’m spending enough time just writing the material, I’m not really ready to invest more time to write the code to suit my own needs to display the material…

Other ideas?

Thanks!

Eric

WiReDcHiMpAnZeE · November 20, 2012, 10:36pm

Im doing something similair for my sophmore civics teacher

CJW · November 21, 2012, 2:59am

You can call custom javascript functions with *script, for e. g.

*script changeFont()

Where changefont might look like:

function changeFont() {
document.getElementById(“text”).style.fontFamily = arial;
}

The only other way is to change the style.css file definitions, but to do it IN-game the only way is cucalling custom js functions.

RETowers · November 22, 2012, 2:34am

@CJW Is there any real tutorial on this? 'Cause I like to think I got my hand around CS, but what you wrote flew right over my head. I get the gist of the idea, but I’d have no clue as to how to actually implement it.

If there is no tutorial, could you give me a couple of quick ideas so I can try to fill in the blanks and write one up for the wiki?

CJW · November 22, 2012, 2:41am

@Reaperoa

There is not. It’s not choicescript, but javascript.
The *script command just allows external function calls. I’m not really sure we could write a tutorial based on purely editing choicescript’s appearance with javascript - - you’d very much be better off just learning the javascript. So far I’ve tried to avoid tutorials on it because quite frankly, there is already a million and one other places that do it much better than we ever could.

We’ve got to draw a line between teaching choicescript and teaching web coding. If you get what I’m saying?

RETowers · November 22, 2012, 2:48am

I get that, more I was looking for a minimalist thing. For example, when wanting to use what you wrote, do I write:

*script changeFont()
function changeFont() {
document.getElementById(“text”).style.fontFamily = arial;
}

or

*script changeFont()
{
document.getElementById(“text”).style.fontFamily = arial;
}

or

*script function changeFont() {
document.getElementById(“text”).style.fontFamily = arial;
}

or what? Just a short thing so I have some clue as to how to use this.

FcA · November 22, 2012, 2:57am

I thought the function functionname part would be in a separate js file?
While *script is the command in your scene file.

CJW · November 22, 2012, 3:41am

^This

Only the *script line would be present in the text file, all it does is CALL or “RUN” the javascript function (which changes the element “text”'s style properties).

Make a new file for e. g. functions.js stick it with ui and and scene etc. Make sure to add an extra line in index.html’s head in order to load it. Then call it with *script when you wish to use it.

I can copy and paste a practical example when I get home if you like?

CJW · November 22, 2012, 4:48pm

http://dl.dropbox.com/u/7840892/CSSdemo/mygame/index.html - Demo/Example

Choicescript Code


*temp terminale
*set terminale false
*label menu
[b]CSS Demo[/b]
*choice
 *if (terminale = false) #Change to Computer Terminal CSS
   *set terminale true
   *script changeDisplay("terminal")
   *goto menu
 *if (terminale) #Change to Story CSS
   *set terminale false
   *script changeDisplay("story")
   *goto menu

Javascript code (seperate .js file)


function changeDisplay(type) {
var body = document.getElementById("body");
if (type == "terminal") { 
body.style.fontFamily = "Courier New", "Lucida Console", "Arial";
body.style.backgroundColor = "#000000";
body.style.color = "#5DFC0A";
  }

if (type == "story") {
body.style.fontFamily = "Georgia","Times New Roman", "serif";
body.style.backgroundColor = "#F7F4F1";
body.style.color = "rgba(0, 0, 0, 0.85)";
 }
}

FcA · November 22, 2012, 11:11pm

Looks neat @CJW, gonna give it a try when I get to my machine.

Quick questions though:
Can I slap these couple lines of js onto one of the existing js files that come with the CoG kit (so I don’t create a new js file) and if so, would you have a preference as to which one of the js files to modify? Or would that be risking, I dunno, new bug potential.

CJW · November 23, 2012, 2:48am

@FcA - Yep, no problem.
It’s just easier to debug and remove if separate. Particularly when you have a lot of them.
You could probably actually put it at the bottom of mygame.js.

RETowers · November 23, 2012, 10:39am

Thanks @CJW I’ll draw up the wiki page for it (if you don’t mind), but I’ll need you (or someone else qualified) to fact check it.

CJW · November 23, 2012, 10:48am

@Reaperoa Sure thing! Just be sure to warn users that it’s a “hack” and is not supported by CS Devs/Publishing Programme?

RETowers · November 23, 2012, 11:09am

Of course. I think I remember Jason saying that it shouldn’t ever really cause any problems (so I’ll probably mention that too), but at the very least need to clarify it so that people don’t try to bring up JS problems.

CJW · November 23, 2012, 11:27am

He did and yeah, we just don’t want people complaining about unexpected behaviour resulting from javascript. It’s too big a field to cover.

lordirishdas · November 24, 2012, 7:30am

@CJW how am I to get my story dome when I have to spend most of my free time figuring out all these awesome mods you keep coming up with.

CJW · November 24, 2012, 11:24am

@lordirishdas - As much as I wish they could, mods don’t make a good story (or a good game for that matter!), so don’t spend too much time implementing each and every one of them!

I’m very glad you like them though

Govmiller · December 4, 2012, 8:10pm

All-
Thanks very much for the conversation. I found mostly what I was looking for. Here’s where:

The ui.js file:

specifically, the first function defined: printx. There are a number of .replace instructions, and in there you can see the code for bold & italic. So I just copied and pasted and came up with a new code (I used “t” for Title) and then used the inline styles to define what I wanted to see. Here’s the two I added:


.replace(/\\[t\\]/g, '<p style="font-family:arial;color:red;font-size:35px;">')
.replace(/\\[\\/t\\]/g, '</p>')
.replace(/\\[t1\\]/g, '<p style="font-family:arial;color:blue;font-size:25px;">')
.replace(/\\[\\/t1\\]/g, '</p>')

Hmmm… it’s eating my code…

so here’s what’s missing…

p style="font-family:arial;color:red;font-size:35px;

And then various versions thereof…

As you can see, these are all paragraph formatting. A little more work and I might be able to get it to work inline with the text. But this does what I want, and since the ui.js file will go with my lectures, I can use a different color/font combo with different lectures.

Thanks all!

CJW · December 4, 2012, 8:36pm

You can use the <span> element to wrap and style text without the line breaking.
Glad to be of help anyhow

Govmiller · December 6, 2012, 11:18am

Cool- I’ll look at that after I’m done with finals- next week…
Thanks!