Как мне отформатировать символы в слове головоломки с помощью mathJax или его аналога для Интернета - PullRequest
Новая
       9

Как мне отформатировать символы в слове головоломки с помощью mathJax или его аналога для Интернета

0 голосов
/ 10 мая 2018

Я пытаюсь создать игру-головоломку в слова, но больше похоже на головоломку с уравнением игра-головоломка с уравнением image

Как я могу это сделать с помощью любой математической библиотеки форматирования, такой как MathJax?Вот еще одна картинка для более глубокого понимания решение головоломки с уравнением

В настоящее время работаю с jquery.
Вот мой текущий вывод

Вот моя html-страница

<!DOCTYPE html>
<html>
<head>
  <title>Word Find</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>


<div id='puzzle'></div>
<div id='words'></div>
<div><button id='solve'>Solve Puzzle</button></div>

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script> 
<script type="text/javascript" src="../src/wordfind.js"></script> 
<script type="text/javascript" src="scripts/wordfindgame.js"></script> 
<script>



     var firstEqn = "`s=u_t+1/2g_t^2`"; 
      var secondEqn = "`s=u_t+1/2g_t^2`"; 
      var thirdEqn = "`v^2=u^2+2gs`";
      var fourthEqn = "`v=u-g_t`";
      var fifthEqn = "`s=ut-1/2g_t^2`";

      var words = [firstEqn, secondEqn, thirdEqn, fourthEqn, fifthEqn];

      // start a word find game
      var gamePuzzle = wordfindgame.create(words, '#puzzle', '#words');

      $('#solve').click( function() {
        wordfindgame.solve(gamePuzzle, words);
      });

      // create just a puzzle, without filling in the blanks and print to console
      var puzzle = wordfind.newPuzzle(
        words, 
        {height: 18, width:18, fillBlanks: false}
      );
      wordfind.print(puzzle);

    </script>
    </body>
    </html>

Вот функция, которая рисует головоломку 

var drawPuzzle = function (el, puzzle) {

var output = '';
  // for each row in the puzzle
  for (var i = 0, height = puzzle.length; i < height; i++) {
    // append a div to represent a row in the puzzle
    var row = puzzle[i];
    output += '<div>';
    // for each element in that row
    for (var j = 0, width = row.length; j < width; j++) {
        // append our button with the appropriate class
        output += '<button class="puzzleSquare" x="' + j + '" y="' + i + '">';
        output += "`"+row[j]+"`" || '&nbsp;';
        output += '</button>';
    }
    // close our div that represents a row
    output += '</div>';
  }

  $(el).html(output);
};
...