Scramble

Scramble

Current Version	2.0
Operating Systems	All
Developer(s)	Hardmath123
Programming language	HTML/JavaScript
Released?	Yes
Archived Forum Topic	ar-topic:63753

The other logo for Scramble.

Scramble is a Scratch Extension that allows users to create their own blocks for Scratch, and was written by Hardmath123. It is written in HTML and JavaScript. The images were created by Joeman592, and meew0 and Pecola1 thought up many ideas for it. As of now, Scramble is not being developed.

Specs

Current version: 2.0
Size: 23KB
Platform: HTML/JavaScript
Created by: Hardmath123
Blocks: 52
Previous versions:
- Scramble 1.1
- Scramble 1.0
- Beta 2 (no longer available)
- Beta (no longer available)

Features added in version 2.0

Taken from the release notes Scramble 2.0 as of June 30, 2011, made by Hardmath123:

Additions:
- Developer mode
- New font (Comic Sans)
- Different background color
- Custom blocks
- Dropdown lists (Key menu, sprite menu, math functions menu, costume name menu)
- Hiding the contents. Click to show each one!
- More Commands
Tools:
- Developer mode

Developing Scramble

Getting the source code

To develop Scramble (2.0), you will need the source code, which comes bundled in the Scramble 2-0 folder, named Source Code. It is recommended to make a duplicate file with the original code, in case you destroy it beyond repair. You can also get the Source Code by right-clicking anywhere on the page (besides text boxes), and choosing view source.

Running a Scramble Mod

Assuming you have made a Scramble mod in a plaintext document like TextEdit or Notepad, use the following instructions to run it:

Save the file as 'ScrambleModSource.txt'
Save a duplicate as 'ScrambleModSource.html'

Double-click ScrambleModSource.html to view your document. You will need to do this whenever you make a change. To make a version where you do not need to do this whenever you make an edit:

Save the file as 'ScrambleModSourceEditable.html', but do not close the .txt file.
Open this file. You now have two windows of the same file.
Make a change in the .txt window and press control+S to view it in the web browser window. Note: closing the .txt window will make the file un-editable again, so leave them both open until you're done. Otherwise, save the source as a .txt, and do the above whenever you need to edit it.

Creating a Scramble Command

Though Scramble has a "insert custom command" feature, it may get tedious to do that over and over. To add a command, do the following:

Note:

The code is very fragile, and should be altered carefully. It is recommended to keep a duplicate.

First, note the following abbreviations used in the codes. Whenever you see these, insert the stuff described below.
- +++++ is the block's name. Make it short, and made of only letters. E.g. moveBackwards
- ///// is the block's text. That is the text you see that describes what the block does, and is visible on the main screen. E.g. Move the sprite backwards.
- ||||| is the block's squeak coding, what it actually does. When you insert coding, use the following rules:
  - Codes are enclosed in double-quotes (")
  - Inputs are named tempInputA, tempInputB, and tempInputC. Inputs are added like this:
    - ```
    "coding"+tempInputA+" more coding"
```
- ```
"self forward: "+tempInputA+"."
```
- ----- is the coding translated from Squeak into English, e.g.: "Move "+tempInputA+" steps back""
- >>>>> is what the input asks for, like 'How far should it move backwards?'. Remember to include the data types you can include.

Now, open up the source code. Scroll down to the following line:

<!--JS blockspecs here-->
<!--||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||-->
<!--____________________________________________________________________________________________________________________________________________________________________________-->
<!--============================================================================================================================================================================-->

Now, you will see a list of the types of blocks, encased in , and followed by some code. For motion, it is:

<!--Motion-->
<br><br><br><a id="motion"><font color="blue"><img src="http://i.imgur.com/fkRB9.gif"></a>
<br><input type="radio" name="commands" value="move" onclick="setBlockVal(this.value)">Move the sprite forwards
<br><input type="radio" name="commands" value="turn" onclick="setBlockVal(this.value)">Turn the sprite [clockwise]
<br>
<br><input type="radio" name="commands" value="setPos" onclick="setBlockVal(this.value)">Set the position of the sprite
<br><input type="radio" name="commands" value="setAngle" onclick="setBlockVal(this.value)">Set the direction of the sprite
<br><input type="radio" name="commands" value="changeX" onclick="setBlockVal(this.value)">Change the x position of the sprite
<br><input type="radio" name="commands" value="changeY" onclick="setBlockVal(this.value)">Change the y position of the sprite
<br>
<br><input type="radio" name="commands" value="xpos" onclick="setBlockVal(this.value)">Set a [[variable]] to the x position
<br><input type="radio" name="commands" value="ypos" onclick="setBlockVal(this.value)">Set a variable to the y position
<br><input type="radio" name="commands" value="dir" onclick="setBlockVal(this.value)">Set a variable to the direction</font>

Scroll to the type you need. Go under the </a>. Paste in the following code and fill in the abbreviations:

<!--notFromOriginal-->
<!--Made by {username}-->
<br><input type="radio" name="commands" value="+++++" onclick="setBlockVal(this.value)">/////
<!--End made by {username}-->
<!--End notFromOriginal-->

This is called the ScrambleSpec, and is what defines the block.
Now, scroll down to:

/*Motion
* /

Look for your block type in this format:

/*Type
* /

Insert this snippet:

	if (blockName=="add")
	{
		tempInputA=prompt(">>>>>")
		tempInputB=prompt(">>>>>")
		tempInputC=prompt(">>>>>")
		document.getElementById("currentBlock").value=|||||
		document.getElementById("currentBlockSimple").value=-----
	}