Message Boards Message Boards

Custom Interface Example

Posted 7 years ago

Three screen shots of Feng Shui

My students practice some math skills through interactive apps I develop. Feng Shui, for instance, helps them gain proficiency with function composition. I made a Wolfram Language version of Feng Shui. The results seemed interesting enough to share on this list.

The user clicks on the cover art and then answers six randomly generated function composition questions. The app tracks stats and reports a score at the end based on speed, accuracy, and difficulty of the questions. A score of 8000 indicates proficiency. Top scores are over 9000.

I've provided the full code below. To make it work, copy the attached FengShuiCover.jpg into where the code says

coverPic=

Then evaluate the code. To start, click on the cover art. When the math question appears, click once anywhere in the interface and start typing an answer. When you have typed a correct answer, you will automatically advance to another question.

Wolfram Advantage: In the Wolfram Language, Feng Shui's code shrunk to about a quarter of its HTML/JavaScript/PHP size, partly because of Wolfram's compact syntax and partly because Wolfram can handle math much more efficiently. For instance, to recognize a correct answer, JavaScript has to compare several variations of a polynomial (4x^2 – 9x + 1, 1 – 9x + 4x^2, etc) to what the user has typed, while Wolfram just compares the underlying symbolic expressions once.

Typing Math: I feel strongly that end users should not have to know some arcane set of key strokes to type math. In Feng Shui, the user types 4x^2-3x+1 but sees the following appear as she types:

enter image description here

To accomplish this, I reduced the string that the user typed to characters and replaced some patterns of characters with boxes (e.g., SuperscriptBox[] or StyleBox[]). This simple example Italicizes “x”:

Characters[resp] /. "x" -> StyleBox["x", FontSlant -> Italic]

I have been able to extend this method in other programming languages to more complex math expressions, so I assume that I would be able to in Wolfram too. I'd like to thank the experts on this list, particularly Gianluca Gorni, for providing examples of box manipulation to solve such challenges.

Set Insertion Point: A challenge that I was not able to overcome was that the user has to click inside Feng Shui before typing. I think that the function I need to set the insertion point inside the interface is SelectionMove[], but I was not able to get it to work for me. Any suggestions would be appreciated.

Interface Design: When I first started learning the Wolfram Language, it was easy to make Manipulate[] expressions and deploy them, but it wasn't so obvious how to make and deploy other kinds of user interfaces. Threads on this list indicate that other users have this problem too. Feng Shui and the larger project Chicken Scratch are examples of custom interfaces made with the Wolfram Language.

I've tested the .nb (the code listing below) on Mac OS 10.12.6 using Mathematica 11.0.1.0. I've also attached a .cdf file, which I have tested on Mac and Windows. Enjoy. Let me know if you have any questions.

coverPic = 
happySound = Sound[{SoundNote["A5", .02, "Crystal"],SoundNote["C7", .1, "Crystal", SoundVolume -> .75]}];
sadSound = Sound[{SoundNote["AFlat2", .07, "Kalimba", SoundVolume -> .5]}];
font = FontFamily -> "Times New Roman";
magBlue = RGBColor["#000099"];

newQ[] := {
   state = 2;
   hint = "";
   qFormNo = RandomInteger[{1, 4}];
   qForm = TraditionalForm[{f[g[x]] == "?", (f\[SmallCircle]g)[x] == "?", g[f[x]] == "?", (g\[SmallCircle]f)[x] == "?"}[[qFormNo]]];
   Switch[RandomInteger[{1, 4}],
    1,  (* f(x)=ax+b   g(x)=cx+d *)
        diffPts += 50;
        co = RandomChoice[DeleteCases[Range[-12, 12], 0], 2];
        con = RandomInteger[{-99, 99}, 2];
        fx = TraditionalForm[f[x] == co[[1]] x + con[[1]]];
        gx = TraditionalForm[g[x] == co[[2]] x + con[[2]]];
        If[qFormNo < 3,
            ans = Expand[Composition[co[[1]] # + con[[1]] &, co[[2]] # + con[[2]] &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[1]] (g[x]) + con[[1]]]],
            ans = Expand[Composition[co[[2]] # + con[[2]] &, co[[1]] # + con[[1]] &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[2]] (f[x]) + con[[2]]]]],
    2,  (* f(x)=ax^2   g(x)=bx *)
        diffPts += 125;
        co = RandomChoice[DeleteCases[Range[-#, #], 0]] & /@ {3, 12};
        con = {};
        fx = TraditionalForm[f[x] == co[[1]] x^2];
        gx = TraditionalForm[g[x] == co[[2]] x];
        If[qFormNo < 3,
            ans = Expand[Composition[co[[1]] #^2 &, co[[2]] # &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[1]] (g[x])^2]],
            ans = Expand[Composition[co[[2]] # &, co[[1]] #^2 &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[2]] (f[x])]]],
    3,  (* f(x)=ax+b   g(x)=cx^2 *)
        diffPts += 225;
        co = RandomChoice[DeleteCases[Range[-#, #], 0]] & /@ {5, 8};
        con = RandomInteger[{-24, 24}];
        fx = TraditionalForm[f[x] == co[[1]] x + con];
        gx = TraditionalForm[g[x] == co[[2]] x^2];
        If[qFormNo < 3,
            ans = Expand[Composition[co[[1]] # + con &, co[[2]] #^2 &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[1]] (g[x]) + con]],
            ans = Expand[Composition[co[[2]] #^2 &, co[[1]] # + con &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[2]] (f[x])^2]]],
    4,  (* f(x)=ax^2+bx+c   g(x)=dx+e *)
        diffPts += 325;
        co = RandomChoice[DeleteCases[Range[-12, 12], 0], 2];
        con = RandomInteger[{-12, 12}];
        fx = TraditionalForm[f[x] == x^2 + co[[1]] x + con];
        gx = TraditionalForm[g[x] == co[[2]] x];
        If[qFormNo < 3,
            ans = Expand[Composition[#^2 + co[[1]] # + con &, co[[2]] # &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[(g[x])^2 + co[[1]] (g[x]) + con]],
            ans = Expand[Composition[co[[2]] # &, #^2 + co[[1]] # + con &][x]];
            hintTxt = StringForm["substitute and simplify: `1`", TraditionalForm[co[[2]] (f[x])]]]],
   diffPts += 43*Count[Flatten[Join[{co}, {con}]], x_ /; x < 0]; (* negatives *)
   diffPts += 100*Log10[Total[Abs[CoefficientList[ans, x]]]]; (* ans totals *)
   pre = StringForm["`1`\t`2`", fx, gx];
   q = qForm;
   resp = "";
   };

keyDown[k_] := {
   If[state != 2, Return];
   If[MatchQ[ToCharacterCode[k], ({8} | {127} | {46} | Except[{_?NumberQ}])],
    bkSp++;
    resp = If[resp === Null || StringLength[resp] < 2, Null, StringDrop[resp, -1]],
    If[StringContainsQ["x1234567890^-+", k],
     resp = If[resp === Null || resp === "", k, resp <> k];
     If[ToExpression[resp] == ans,
      EmitSound[happySound];
      qCt++;
      If[qCt < 6, newQ[], youWon[]]],
     EmitSound[sadSound]]];
   If[state == 2,
    q = StringForm["`1``2`",
      qForm /. "?" -> "",
      If[resp === Null || resp === "", "?",
       char = Characters[resp] /. 
            "x" -> StyleBox["x", FontSlant -> Italic] //. 
            {a___, b : Longest[Repeated["1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0"]], c___} -> {a, StringJoin[b], c} /. 
            {a___, b_, "^", c_, d___} -> {a, SuperscriptBox[b, c], d} /. 
            a_ -> RowBox[a];
       char // DisplayForm]]]
   };

youWon[] := {
   state = 3;
   bTime = Now;
   instructions = "";
   elTime = DateDifference[aTime, bTime, "Second"];
   timePts = 4000 (120/QuantityMagnitude[elTime])^.6;
   accPts = 3000 - 53 bkSp;
   score = timePts + accPts + diffPts;
   If[score < 6500, score = 6500 - (6500 - score)^.8];
   If[score > 9500, score = 9500 + (score - 9500)^.8];
   score = Round[score];
   pre = "";
   q = Style[ToString[score] <> " Points", 72, Blue];
   hint = "";
   };

showHint := {If[state == 2, bkSp += 9; hint = hintTxt]};

start[] := {
   score = 0;
   diffPts = 0;
   bkSp = 0;
   qCt = 0;
   aTime = Now;
   instructions = Style[StringForm["Complete the function rule.\nType x^2 for `1`.", TraditionalForm[x^2]], 18, font, TextAlignment -> Center];
   game = EventHandler[Column[{
       Pane[Style[StringForm["`1` to go", Dynamic[6 - qCt]], 20, font], {600, 30}, Alignment -> Right, FrameMargins -> {{0, 8}, {0, 8}}],
       Pane[Style[Dynamic[pre], magBlue, 26, font], {600, 50}, FrameMargins -> {{20, 0}, {0, 0}}],
       Pane[Style[Dynamic[q], magBlue, 36, font], {600, 160}, Alignment -> Center],
       Pane[Style[Dynamic[hint], magBlue, 24, font], {600, 60}, Alignment -> Center],
       Row[{
         Pane[Button[Style["Start Over", 20, font], newGame[], Appearance -> "Frameless"], {120, 100}, Alignment -> {Left, Bottom}, FrameMargins -> {{8, 0}, {8, 0}}],
         Pane[Dynamic[instructions], {360, 100}, Alignment -> {Center, Top}, FrameMargins -> {{0, 0}, {0, 8}}],
         Pane[Button[Style["Get Hint", 20, font], showHint[], Appearance -> "Frameless"], {120, 100}, Alignment -> {Right, Bottom}, FrameMargins -> {{0, 8}, {8, 0}}]}]
       }, Spacings -> 0], {"KeyDown" :> keyDown[CurrentValue["EventKey"]]}];
   newQ[]};

newGame[] := {
   state = 1;
   game = Button[Image[coverPic, ImageSize -> {600, 400}], start[], Appearance -> "Frameless"];
   Framed[Panel[Dynamic[game], Background -> White, FrameMargins -> None], FrameMargins -> None]};

newGame[]
Attachments:
POSTED BY: Mark Greenberg
3 Replies

This is very nice, Mark.

An alternative approach for a web-based app would be to use APIFunctions deployed to the WolframCloud for the assessment. There are some pretty nice tools to help students typeset math nicer in web browsers. I like MathQuill for that. MathQuill can also pass the student input to the api as either MathML or LaTeX. Wolfram Language can import/parse either format.

POSTED BY: Chad Knutson
Posted 7 years ago

Thanks, Chad, for the comment. Feng Shui, a version written in JavaScript and HTML, is already part of my website. I use MathJax to typeset the math. I'll have to experiment with using Wolfram for the calculations. Sounds like an interesting idea.

POSTED BY: Mark Greenberg

enter image description here - Congratulations! This post is now a Staff Pick as distinguished on your profile! Thank you, keep it coming!

POSTED BY: Moderation Team
Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
Attachments
Remove
or Discard

Group Abstract Group Abstract