<commit_before><!DOCTYPE html>
<html>
  <head>
    <title>Sudoku</title>
    <link rel="stylesheet" href="../css/JSAV.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <style>
    #container {
      width: 98%;
      position: relative;
    }
    .jsavcounter {
      position: absolute;
      float: left;
      top: 15px;
    }
    </style>
  </head>
  <body>
    <h1>JSAV Sudoku Grid</h1>
    <p>This is a simple example of the flexibility of JSAV arrays.
      It also illustrated updating slideshows interactively,
      on-the-fly.
      The example creates a sudoku game using nine JSAV arrays.
      If you click on cells, they highlight the first time you click.
      Each click adds a new slide, which you can see by resetting the
      slideshow with the << control.
      View the source to see how this is done in CSS and JavaScript.
    </p>
  <div id="container">
    <div class="jsavcontrols"></div><span class="jsavcounter"></span>
    <p class="jsavoutput jsavline"></p>
    <div class="jsavcanvas">
    </div>
  </div>
  <style>
  /** change size and margins of arrays */
  .jsavarray { margin: 0; height: 20px; min-height: 20px; }
  .jsavarray li { border-radius: 0 !important; height: 20px; width: 20px; font-size: 8px; line-height: 20px;}
  
  /** change the borders of the elements to create 3x3 grids **/
  .jsavarray:nth-of-type(3n+1) { border-width: 2px;}
  .jsavarray li:nth-of-type(3n) { border-right: 2px solid black;}
  .jsavarray li:first-of-type { border-left: 2px solid black;}
  .jsavarray:nth-of-type(3n-2) li { border-top: 2px solid black;}
  .jsavarray:nth-of-type(9) li { border-bottom: 2px solid black;}
  .jsavarray:not(first-of-type) li{ border-top: none;}
  </style>
    <script
       src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script src="../lib/jquery.transform.light.js"></script>
    <script src="../lib/raphael.js"></script>
    <script src="../build/JSAV-min.js"></script>
    <script>
  // wrap everything in an anonymous function to not pollute global namespace
  (function() {
    var c1;
    var av = new JSAV("container");
    var arrays = [];
    
    // function to handle a click event on an array
    var clickHandler = function(index, e) {
      this.css(index, {"background-color": "yellow", "transform": "scale(1.2)", "zIndex": 700});
      av.step();
    };
    
    // initialize nine arrays
    for (var i = 0; i < 9; i++) {
      arrays[i] = av.ds.array([1, 2, 3, 4, 5, 6, 7, 8, 9]);
      // bind the clickHandler to handle click events on the array
      arrays[i].click(clickHandler);
    }
    av.recorded();
  })();
    </script>
  </body>
</html><commit_msg>Fixed sudoke example to work with current JSAV version<commit_after><!DOCTYPE html>
<html>
  <head>
    <title>Sudoku</title>
    <link rel="stylesheet" href="../css/JSAV.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <style>
    #container {
      width: 98%;
      position: relative;
    }
    .jsavcounter {
      position: absolute;
      float: left;
      top: 15px;
    }
    </style>
  </head>
  <body>
    <h1>JSAV Sudoku Grid</h1>
    <p>This is a simple example of the flexibility of JSAV arrays.
      It also illustrated updating slideshows interactively,
      on-the-fly.
      The example creates a sudoku game using nine JSAV arrays.
      If you click on cells, they highlight the first time you click.
      Each click adds a new slide, which you can see by resetting the
      slideshow with the << control.
      View the source to see how this is done in CSS and JavaScript.
    </p>
  <div id="container">
    <div class="jsavcontrols"></div><span class="jsavcounter"></span>
    <p class="jsavoutput jsavline"></p>
    <div class="jsavcanvas">
    </div>
  </div>
  <style>
  /** change size and margins of arrays */
  .jsavarray { margin: 0 auto; height: 20px; min-height: 20px; }
  .jsavarray li.jsavnode { border-radius: 0 !important; min-height: 20px; height: 20px; width: 20px; min-width: 20px; font-size: 8px; line-height: 20px;}
  
  /** change the borders of the elements to create 3x3 grids **/
  .jsavarray:nth-of-type(3n+1) { border-width: 2px;}
  .jsavarray li:nth-of-type(3n) { border-right: 2px solid black;}
  .jsavarray li:first-of-type { border-left: 2px solid black;}
  .jsavarray:nth-of-type(3n-2) li { border-top: 2px solid black;}
  .jsavarray:nth-of-type(9) li { border-bottom: 2px solid black;}
  .jsavarray:not(first-of-type) li{ border-top: none;}
  </style>
    <script
       src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script src="../lib/jquery.transform.light.js"></script>
    <script src="../lib/raphael.js"></script>
    <script src="../build/JSAV-min.js"></script>
    <script>
  // wrap everything in an anonymous function to not pollute global namespace
  (function() {
    var c1;
    var av = new JSAV("container");
    var arrays = [];
    
    // function to handle a click event on an array
    var clickHandler = function(index, e) {
      av.step();
      this.css(index, {"background-color": "yellow", "transform": "scale(1.2)", "zIndex": 700});
    };
    
    // initialize nine arrays
    for (var i = 0; i < 9; i++) {
      arrays[i] = av.ds.array([1, 2, 3, 4, 5, 6, 7, 8, 9]);
      // bind the clickHandler to handle click events on the array
      arrays[i].click(clickHandler);
    }
    av.displayInit();
    av.recorded();
  })();
    </script>
  </body>
</html>
{'fraction_non_alphanumeric': 0.15687303252885623, 'fraction_numerical': 0.020636586218957677, 'mean_word_length': 2.835680751173709, 'pattern_counts': {'":': 6, '<': 89, '<?xml version=': 0, '>': 83, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5773957', 'n_tokens_mistral': 2042, 'n_tokens_neox': 1942, 'n_words': 557}