SDI project 2

Assignment: Project 2 (8h) Each week you will complete an assignment that allows you to demonstrate all that you have learned in this course. Each of these assignments has a theme that is customized to tell a story or process that is something of personal interest to you. You will need to complete the lecture and research activities for the week and incorporate their objectives into your assignment.Level of EffortThis activity should take approximately 480m to complete. It will require:360m Research60m Prep & Delivery60m WorkIf you find that this activity takes you significantly less or more time than this estimate, please contact me for guidance.Reading & ResourcesDeliverable 2 Flowchart (necessary)This image is embedded below, and covers everything you need to do for Project 2.InstructionsThe flowchart for Project 2 may look a little daunting at first, but take a closer look:It’s not that bad—there are a few new things, but most of it is just more of the same from last week. There are a few new flowchart symbols, a few new vocabulary terms, and it’s broken into multiple parts.This assignment works the same as the first: come up with a story or process and code it to fit the flowchart while incorporating the points from this week’s activities. Below is an example that builds on the Pirate example from last week:Our new crewmember  had only been at sea for days, but he was already rethinking his decision to become a pirate. All he had done so far was swab the , which didn’t feel very Pirate-y. It felt like his days were just the same thing over and over again:Is it time to ? It looks like I have  to go. The First Mate says I have to keep swabbing , so I guess I’d better get to it.And just like each day was the same, each deck was the same, so that  every deck that he was told to do, he just swabbed and swabbed and swabbed. No matter who he , the result was always the same: .In time, he kept his mind occupied by imagining what would happen  in the middle of the night.While this example story was done in Codelish (Code+English), you are required to turn in fully-working JavaScript. Your variable and function names should be descriptive enough to tell the story, along with a few statements to bring together the narrative.Download the Zip archive file attached to this activity. Uncompress the archive and move the  folder to the folder where you keep all of your coursework. This folder contains the template HTML, CSS, and empty JavaScript files that you will need to complete this assignment.You’ll need to rename your JavaScript file to follow the naming convention for the assignment,, and will need to do it in two places. First, rename the JavaScript () file. Second, open the HTML file in your editor and change the script tag in the HTML file to use the updated file name.Git Repository (I’ll worry about this!)This assignment and the next two will be tracked using Git, software that you’ll learn how to use in the Revision Controlactivity. Git will help you to keep a log of the changes you make to your assignment files, but it’s not automated magic. You’ll need to have the presence of mind to work in small chunks, save often, and work with Git each step of the way.This part of the assignment is not on the rubric, because it is required but doesn’t count toward your grade. Please, please, please take the time to read and digest what is required for revision control, because the other two parts of the assignment may be perfect and you could still get a zero.  

Flowchart Symbols and What They Mean

The Project

2

flowchart can seen a bit daunting, but if you break it down into its pieces
and parts, you’ll see that it’s not a scary as it looks. To begin, let’s take a look at the
flow of the main code.

We know that this part of the flowchart is the main
code because it contains the Start and Finish
support details in the Terminator symbols.
Remember that these indicate where our code will
begin and where it will end.

The next symbol of the flowchart indicates Internal
Storage, which is the technical term for stored
values. This symbol also contains support details
that tell us what should be happening in our code at
this time. In this case, we need to declare and
define our string variable, number variable, and our
array.

The next symbol is the Predefined Process
symbol. This symbol indicates that there is a
function that needs to be performed. In this case,
the support detail tells us the name of the function
we need to look for. For simplicity, we’ve simply
called it Procedure in the flowchart. This indicates
that control of the code is being passed to another
process and won’t return to our main code until that
process is complete.

To see what the flow will be in this other process,
we need to look for a flowchart with the same
support details. That is, the separate flowchart for
our procedure should begin with a Start oval with
the word Procedure in it. And, if you look at the
Project 2 flowchart, you’ll see that we do, indeed
have that!

1

The Procedure Flowchart

You’ll notice that there’s a new symbol containing the support detail Argument and it’s
pointing at the Procedure oval. This indicates that we have to send an argument to the
procedure. It can be any data type you want to use (number, string, Boolean, etc.). You
do this in the code when you call the function. So, let’s assume you’re going to use the
name myProcedure as the name of your procedure and you want to pass the number 5
as the argument. You would write the code like this:

! myProcedure(5);

The number 5 will be passed to the procedure as the argument.

Notice, also, that the first symbol within the procedure flowchart is a Conditional
symbol and that the support detail reads Argument Conditional. This means that the
first thing that should happen in your procedure code is an if statement that somehow
uses the argument that is passed. So, if we use the previous example of passing an
argument of 5, your first step in the procedure will be to compare that 5 to something,
such as a variable. Then, you need to send some kind of output to the console.

The final symbol in the Procedure flowchart is the Back symbol. This indicates that the
procedure is finished and control is passed back to the main code. If you look at the
flowchart for our main code, you’ll see that the next symbol in the flowchart is another
Predefined Process symbol with the support details of Boolean Function. Remember
that this indicates that control of the code will flow to a separate function. Do we have a
flowchart that begins with an Terminator symbol with support details indicating it’s a
Boolean Function? Yes, we do!

2

The Boolean Function

This function begins with the Terminator symbol but has two Argument symbols pointing
into the symbol. This means that you will need to send two arguments to this function.
Again, the data type can be whatever you would like to use. Remember that in order to
do this, you also have to declare your function so that it can accept arguments.

Similar to the procedure function, we need to perform an if statement to perform a
comparison conditional. Once the conditional is done, you also need to perform some
kind of output to the console.

The next symbol is the Terminator for the function but rather than simply send control
back to the main code, we also want to return a value from the function. This means
we are sending a value out of the function and back to the main code for use. You can
do this by calling the function from a variable assignment. So, if you have declared a
variable myReturn, you can call the function like the following:

! myReturn = booFunction(“some string”, 5);

The value returned from the function will be stored in the variable myReturn. Also,
notice that the Terminator symbol reads, Return Boolean. This means that your
Boolean function must return a Boolean value, so in our example, myReturn will be
either true or false.

Once control has been returned to the main code, the next symbol is another
Predefined Process symbol, which indicates that the Number Function is the next to
be called.

3

The Number Function

The first thing you should notice about this function is that the Argument symbol pointing
into the Number Function terminator says Number instead of Argument. This is
because you are required to send a number as an argument to this function. Similarly,
you’ll notice that the Return must also be a number.

This function contains a While Loop, which will require you to perform some kind of
math function during the course of the loop. In most cases, the math component will be
completed when you are configuring the while loop itself by performing some kind of
countdown or count up.

Once the Return is performed, control returns back to the main code and the next
function is executed.

One very important thing to remember is that a function can only return a single value.
That is, it can return a single string, a single Boolean, a single number, or a single array.
And once the code hits the return, the flow of the code is returned to the main code. If
you have any code after the return, it will not run because control no longer belongs to
the function; it has been returned to the main code.

The flow of the Project 2 flowchart continues through the rest of the Predefined
Processes and the functions operate similar to the ones already detailed. To leave
some of the fun up to you, see if you can figure out how the rest of your code will need
to be written in order to follow the flow of the flowcharts.

4

Topic % Excellent (100%) Good (75%) Fair (30%) Poor (0%)

Foundation Technical RequirementsFoundation Technical RequirementsFoundation Technical RequirementsFoundation Technical RequirementsFoundation Technical RequirementsFoundation Technical Requirements

Variables 4 All required variables are present,
correctly declared and defined, with
descriptive names.

Missing one required variable,
or up to two declarations.

Missing more than one required variable, or
serious defects in declaration or definition.
Missing more than one required variable, or
serious defects in declaration or definition.

Data Types 3 All required data types are present
and used correctly.

Missing one required data type,
or some confusion is shown.

Missing more than one required data type, or
there is a clear misunderstanding of data
types.

Missing more than one required data type, or
there is a clear misunderstanding of data
types.

Output 3 All required outputs are present. Missing one required output. Missing more than one required output.Missing more than one required output.

Operators 3 Confidence and competence are
demonstrated manipulating variables.

One or two misused operators. More than two misused operators.More than two misused operators.

New Technical RequirementsNew Technical RequirementsNew Technical RequirementsNew Technical RequirementsNew Technical RequirementsNew Technical Requirements

Boolean Logic 8 Logical AND, OR, NOT operators are
correctly demonstrated.

One missing or misused logical
operator.

Two or more missing or misused logical
operators, or binary operators used instead
of logical.

Two or more missing or misused logical
operators, or binary operators used instead
of logical.

Loops 10 Loops FOR, WHILE are correctly
demonstrated, with valid pre- and exit
conditions.

Both loops used, but one invalid
pre- or exit condition.

Missing one loop, but
the other is valid.

Fundamental lack of
understanding of
loops.

Arrays 10 Arrays are correctly initialized and
used, including required properties
and methods.

Missing up to two required
properties or methods, but
arrays are used correctly.

Array use is mostly
correct, with one or
two small problems.

Fundamental lack of
understanding of
arrays.

Functions 10 Functions are correctly defined
according to the style taught, with
descriptive names.

Poor naming, or incorrect
declaration style (working or
not).

Up to two minor
problems preventing
proper execution.

Fundamental lack of
understanding of
functions.

Scope 8 Proper variable scoping inside and
outside of functions and blocks.

Up to two unscoped or mis-
scoped variables.

Fundamental disregard or lack of
understanding of proper scope.
Fundamental disregard or lack of
understanding of proper scope.

Arguments 8 All required arguments and default are
present and of the correct type.

Up to two missed or mistyped
arguments or defaults.

Unable to demonstrate understanding of
arguments or defaults.
Unable to demonstrate understanding of
arguments or defaults.

Returns 8 All required return values are present,
assigned, and of the correct type.

Up to two missed, unassigned,
or mistyped return values.

Unable to demonstrate understanding of
return values.
Unable to demonstrate understanding of
return values.

Rubric: Project 2 Scalable Data Infrastructures

Due: Thursday, Week 2

Topic % Excellent (100%) Good (75%) Fair (30%) Poor (0%)

Coding ProfessionalismCoding ProfessionalismCoding ProfessionalismCoding ProfessionalismCoding ProfessionalismCoding Professionalism

Syntax 10 There are no syntax errors according
to the style taught.

There are no syntax errors, but
the code does not follow the
style taught.

There are at most
two minor syntax
errors.

More than two minor
syntax errors are
present.

Functionality 5 The project functions without any modification, and follows the flowchart
provided.
The project functions without any modification, and follows the flowchart
provided.

Minor edits are
required to run the
project.

Major edits are
required, as the
project is a hot mess.

Story RequirementsStory RequirementsStory RequirementsStory RequirementsStory RequirementsStory Requirements

Coherence 5 The code tells a story that is not difficult to follow.The code tells a story that is not difficult to follow. The story is
disjointed, but an
effort has been
made.

Little to no attempt
has been made.

Investment 5 The theme and story show creativity and personal investment.The theme and story show creativity and personal investment. Some lack of
creativity or
investment.

Little to no attempt
at creativity or
investment.

Be careful: your final Professionalism grade is affected by your Story and Coding Professionalism deductions.Be careful: your final Professionalism grade is affected by your Story and Coding Professionalism deductions.Be careful: your final Professionalism grade is affected by your Story and Coding Professionalism deductions.Be careful: your final Professionalism grade is affected by your Story and Coding Professionalism deductions.Be careful: your final Professionalism grade is affected by your Story and Coding Professionalism deductions.Be careful: your final Professionalism grade is affected by your Story and Coding Professionalism deductions.

Rubric: Project 2 Scalable Data Infrastructures
Due: Thursday, Week 2

rename-me.js
alert(“JavaScript works!”);

__MACOSX/._rename-me.js

sdi-project2.html

SDI TERMNUMBER: FULL NAME

Project 2

In this space you should provide a short (one paragraph) explanation of your theme and why you chose it.

You may also use this space to explain any elements of your code story that may not be entirely clear. For example, if your theme is thirteenth century Italian poetry, not everyone may be familiar with that.

Don’t forget to replace all of the capitalized elements in this template with your information. Your term number should be in a yymm format, including the year and the month.

COMPLETION DATE, FULL NAME

__MACOSX/._sdi-project2.html

sdi.css
html {
background-color: #E1DFD3;
}
body {
font-family: “Lucida Grande”, “Arial”, sans-serif;
margin: 1.5em auto;
padding: 1.5em;
background-color: white;
color: #4D4B39;
max-width: 35em;
border: 0.75em solid #A6A59C;
line-height: 1.5em;
}
p {
margin: 1.5em 0;
}
h1 {
background-color: #4D4B39;
color: #E1DFD3;
font-size: 200%;
padding: 0.75em;
margin: -0.75em -0.75em 0.75em -0.75em;
}
h2 {
background-color: #4D4B39;
color: #88a75d;
font-size: 150%;
padding: 1em;
margin: -1em -1em 1em -1em;
}
h1 + h2 {
margin-top: -2em;
padding-top: 0;
}

__MACOSX/._sdi.css