A MINI PROJECT REPORT ON

MASTERMIND

Submitted By

V Nikhil Kumar (160116737045)

L Nithin Reddy (160116737046)

Under the guidance of

Mrs. B. Veera Jyothi
Asst. Professor,
Dept. of IT, CBIT

DEPARTMENT OF INFORMATION TECHNOLOGY

CHAITANYA BHARATHI INSTITUTE OF TECHNOLOGY
(Affiliated to Osmania University; Accredited by NBA (AICTE), ISO Certified 9001:2000)
Website: www.cbit.ac.in
HYDERABAD – 500 075
2017
 CHAITANYA BHARATHI INSTITUTE OF TECHNOLOGY
DEPARTMENT OF INFORMATION TECHNOLOGY
(Affiliated to Osmania University)
GANDIPET, HYDERABAD – 500 075

CERTIFICATE
This is to certify that the project work titled “Mastermind” submitted to CHAITANYA
BHARATHI INSTITUTE OF TECHNOLOGY, in partial fulfilment of the requirements for
the award of the completion of 4th semester (CBCS) of B.E. in Information Technology, during
the academic year 2017, is a record of original work done by V Nikhil Kumar (160116737045)
and L Nithin Reddy (160116737046) during the period of study in Dept. of IT, CBIT,
HYDERABAD, under our supervision and guidance.

PROJECT GUIDE HEAD OF THE DEPARTMENT

Mrs. B. Veera Jyothi Dr. Suresh Pabboju
Asst. Professor, Head of the department
Dept. of IT, CBIT. Information Technology
CBIT, HYDERABAD

i
 DECLARATION

This is to certify that the work reported in the present report titled “Mastermind” is a
record of work done by us in the Department of Information Technology, Chaitanya Bharathi
Institute of Technology, Hyderabad.

No part of the report is copied from books / journals / internet and wherever the portion is
taken, the same has been duly referred. The reported results are based on the project work done
entirely by us and not copied from any other source.

V Nikhil Kumar (160116737045)

L Nithin Reddy (160116737046)

ii
 ACKNOWLEDGEMENT

It is our privilege to acknowledge with deep sense of gratitude and devotion for keen
personal interest and invaluable guidance rendered by our Project Guide Mrs. B. Veera Jyothi,
Assistant Professor, Department of Information, Chaitanya Bharathi Institute of Technology.

We take the opportunity to express our thanks to Dr. Suresh Pabboju, Professor & Head
of IT Department, CBIT for his valuable suggestions and moral support.

Our respects and regards to Mrs. B. Veera Jyothi, Assistant Professor, Department of
Information Technology, Chaitanya Bharathi Institute of Technology, for her invaluable
suggestions that helped us in successful completion of the project.

We are grateful to our Principal Dr. Ravinder Reddy Chaitanya Bharathi Institute of
Technology, for his cooperation and encouragement.

Finally, we also thank all the staff members, faculty of Dept. of IT, CBIT, our friends, and
all our family members who with their valuable suggestions and support, directly or indirectly
helped us in completing this project work.

iii
 ABSTRACT

Mastermind or Master Mind is a code-breaking game for two players. The modern game is played
with pegs. It resembles an earlier pencil and paper game called Bulls and Cows that may date back
a century or more. The game is based on an older, paper based game called Bulls and Cows.
The game is played using:

• a decoding board, with a pattern chosen randomly, and eleven additional rows containing four
large holes next to a set of four small holes,
• Code pegs of seven different colours, with round heads, which will be placed in the large holes
on the board, and
• key pegs, some coloured black, some white, which are flat-headed and smaller than the code
pegs; they will be placed in the small holes on the board.

The player is the codebreaker. The code maker i.e. the computer in this case chooses a pattern of
four code pegs. Duplicates and blanks are allowed depending on player choice, so the player could
even choose four code pegs of the same colour or four blanks. In the instance that blanks are not
elected to be a part of the game, the codebreaker may not use blanks in order to establish the final
code. The codebreaker tries to guess the pattern, in both order and colour, within eleven turns.
Each guess is made by placing a row of code pegs on the decoding board. Once placed, the code
maker provides feedback by placing from zero to four key pegs in the small holes of the row with
the guess. A white key peg is placed for each code peg from the guess which is correct in both
colour and position. A black key peg indicates the existence of a correct colour code peg placed in
the wrong position.

HTML and BOOTSTRAP are employed as front end which are two of the core technologies for
building Web pages which provide the structure and layout. To craft the user interface for the game
and to bring the game to life, PYTHON is employed. Here PYTHON is the main language which
is used to develop the game. In this project, we included some special styles in CSS and HTML to
make the website look authentic.

iv
Languages Used:

Hypertext Markup Language (HTML) - A standard markup language for creating web pages
and web applications. It describes the structure of a web page semantically and originally included
cues for the appearance of the document.

With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for
the World Wide Web.

Bootstrap - Bootstrap is a free and open-source front-end library for designing websites and web
applications. It contains HTML and CSS based design templates for typography, forms, buttons,
navigation and other interface components, as well as optional JavaScript extensions. Unlike many
web frameworks, it concerns itself with front-end development only.

Python - Python is an interpreted high-level programming language for general-purpose

programming. Python has a design philosophy that emphasizes code readability, notably using
significant whitespace. It provides constructs that enable clear programming on both small and
large scales.

Python features a dynamic type system and automatic memory management. It supports multiple
programming paradigms, including object-oriented, imperative, functional and procedural, and has
a large and comprehensive standard library.

Django - Django is a free and open-source web framework, written in Python, which follows the
model-view-template (MVT) architectural pattern.

Django's primary goal is to ease the creation of complex, database-driven websites. Django
emphasizes reusability and "pluggability" of components, less code, low coupling, rapid
development, and the principle of don't repeat yourself. Python is used throughout, even for

v
settings files and data models. Django also provides an optional administrative create, read, update
and delete interface that is generated dynamically through introspection and configured via admin
models.

vi
CONTENTS PAGE NO.

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
1.1. Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2. Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
1.3. Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.4. Aim of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.5. Organisation of Report . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

2. Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
2.1. About HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
2.1.2. HTML Basic tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.3. HTML Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
2.1.4. HTML Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.5. HTML Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
2.1.6. HTML Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
2.2. About Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.2. Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2.3. Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
2.2.4. Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2.5. Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
2.3. About Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
2.3.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.2. Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.3.3. Tkinter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.4. About Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.4.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.4.2. Design the Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25

vii
 2.4.3. Write your Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
2.4.4. Design your Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28

3. Software Requirement Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

3.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
3.1.1 Purpose of the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
3.2. Users and their Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
3.3. Software and Hardware Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4. Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.2. HTML. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
4.3. Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
4.4. Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.5. Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.6. Hosting the webpage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

5. Testing and Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

5.1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.2. Testing Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.3. Output Screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

6. Conclusion and Future Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

viii
LIST OF FIGURES

FIGURE NAME PAGE NO.

Fig 5.1 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Fig 5.1.1 How to Play . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Fig 5.1.2 First Rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Fig 5.2 An Important One – Hint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Fig 5.3 Game Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Fig 5.3 (a) Game Won . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Fig 5.3 (b) Game Lost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

LIST OF ABBREVIATIONS

Acronym Meaning

HTML Hypertext Markup Language

CSS Cascading Style Sheets

ix
 1. INTRODUCTION
1.1 OBJECTIVE

We like to keep our bodies active, but why don't we invest the same amount of care in our
minds? Everyone tells us to exercise to stay healthy, but somehow the same necessity is
not given to our brain's health. Maybe we think that a little bit of reading or studying here
and there is enough - but research shows that variation in our mental activity is the key to
long-term success. The objective of this project is to train the minds of people to improve
working memory for people of all age groups in a fun and an interesting way.

1.2 MOTIVATION
We were fascinated since our childhood in making games for computers. Now, with the
current knowledge, we are finally able to create a game. Brain training benefits everyone.
But the best part is that brain training is for everyone.

1.3 OVERVIEW
Mastermind is a webpage consisting a game developed using HTML, Bootstrap and Python
using Django interface. The possibilities in this game are endless.
HTML is used to develop the Web page and Bootstrap is used to design the layout of the
webpage and the game code is written in Python.

1.4 AIM OF THE PROJECT

Our idea is to make the process of game making as easy as possible and at the same time
ensure you can be as creative as you like. The aim of the project is to computerize the pen
and paper based and an existing board game, Mastermind.

1.5 ORGANISATION OF REPORT

Chapter 1 deals with the Introduction of the project and gives the details about the

Project in an abstract view.

1
Chapter 2 deals with the information about the technologies used - HTML, Bootstrap,
Python, Django and their utilization details are discussed in brief.
Chapter 3 deals with the Software Requirements Specifications which is a specification
of the project software and hardware requirements.
Chapter 4 deals with the Implementation part which includes the tools and software that
are used.
Chapter 5 deals with the Testing of the project and screenshots of the project
Chapter 6 explains the Conclusion and further scope of the project.

2
 2. TECHNOLOGIES

2.1 ABOUT HTML

2.1.1 INTRODUCTION
HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages
 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus the link available on a webpage are called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark up" a text document with tags that tell a Web browser how to structure it to
display.
Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers.

2.1.2 HTML Basic Tags

1. HEADING TAGS
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before
and one line after that heading.
2. PARAGRAPH TAGS
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.
3. Line Break Tab
Whenever you use the <br /> element, anything following it starts from the next line.
This tag is an example of an empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.

3
 4.Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

2.1.3 HTML ATTRIBUTES

An attribute is used to define the characteristics of an HTML element and is placed inside
the element's opening tag. All attributes are made up of two parts: a name and a value:
 The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.

CORE ATTRIBUTES
1. id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within
an HTML page. There are two primary reasons that you might want to use an id
attribute on an element:

 If an element carries an id attribute as a unique identifier it is possible to identify

just that element and its content.

 If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.

4
 2. Title Attribute
The title attribute gives a suggested title for the element. The behaviour of this attribute
will depend upon the element that carries it, although it is often displayed as a tooltip
when cursor comes over the element or while the element is loading.

2.1.4 HTML IMAGES

Images are very important to beautify as well as to depict many complex concepts in simple
way on your web page.

INSERT IMAGES

You can insert any image in your web page by using <img> tag. Following is the simple
syntax to use this tag.

<img src="Image URL" ... attributes-list/>

SET IMAGE WIDTH /HEIGHT

You can set image width and height based on your requirement using width
and height attributes. You can specify width and height of the image in terms of either
pixels or percentage of its actual size.

2.1.5 HTML TABLES

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells.

5
TABLE HEADING

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. Normally you will put your top row as table heading, otherwise
you can use <th> element in any row.

TABLE CAPTION

The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table.

2.1.6. HTML FORMS

The <form> Element: The HTML <form> element defines a form that is used to collect user
input.

1. The <input> Element

The <input> element is the most important form element and can be displayed in several ways,
depending on the type attribute.

Type Description

<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of many choices)

<input type="submit"> Defines a submit button (for submitting the form)

2.The Action Attribute

The action attribute defines the action to be performed when the form is submitted. Normally, the
form data is sent to a web page on the server when the user clicks on the submit button. The form

6
data is sent to a page on the server called "/action_page.php". This page contains a server-side
script that handles the form data:

<form action="/action_page.php">

3.The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the
form data:

<form action="/action_page.php" method="POST">

2.2 ABOUT BOOTSTRAP

2.2.1 INTRODUCTION

Bootstrap is a free front-end framework for faster and easier web development. Bootstrap
includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.

2.2.2 LAYOUT

CONTAINERS

Containers are the most basic layout element in Bootstrap and are required when using our
default grid system. Choose from a responsive, fixed-width container or fluid-width. While
containers can be nested, most layouts do not require a nested container.

<div class="container">

<! -- Content here -->

</div>

7
RESPONSIVE BREAKPOINTS

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create
sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on
minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass
files for our layout, grid system, and components.

// Example usage:

@include media-breakpoint-up(sm) {

.some-class {

display: block;

2.2.3 CONTENT

HEADINGS AND PARAGRAPHS

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed.
Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy
spacing.

Heading Example

<h1></h1> h1. Bootstrap heading

<h2></h2> h2. Bootstrap heading

<h3></h3> h3. Bootstrap heading

8
Heading Example

<h4></h4> h4. Bootstrap heading

<h5></h5> h5. Bootstrap heading

<h6></h6> h6. Bootstrap heading

LISTS

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem.
Nested lists have no margin-bottom.

 Lorem ipsum dolor sit amet

 Consectetur adipiscing elit

 Integer molestie lorem at massa

 Facilisis in pretium nisl aliquet

 Nulla volutpat aliquam velit

o Phasellus iaculis neque

o Purus sodales ultricies

o Vestibulum laoreet porttitor sem

o Ac tristique libero volutpat at

 Faucibus porta lacus fringilla vel

 Aenean sit amet erat nunc

 Eget porttitor lorem

9
 1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. Facilisis in pretium nisl aliquet

5. Nulla volutpat aliquam velit

6. Faucibus porta lacus fringilla vel

7. Aenean sit amet erat nunc

8. Eget porttitor lorem

For simpler styling, clear hierarchy, and better spacing, description lists have
updated margins. <dd>s reset margin-left to 0 and add margin-bottom: .5rem. <dt>s are bolded.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

TABLES

Tables are slightly adjusted to style <caption>s, collapse borders, and ensure consistent text-
align throughout. Additional changes for borders, padding, and more come with the .tableclass.

10
This is an example table, and this is its caption to describe the contents.

Table heading Table heading Table heading Table heading

Table cell Table cell Table cell Table cell

Table cell Table cell Table cell Table cell

Table cell Table cell Table cell Table cell

FORMS

Various form elements have been rebooted for simpler base styles. Here are some of the most
notable changes:

 <fieldset>s have no borders, padding, or margin so they can be easily used as wrappers for
individual inputs or groups of inputs.

 <legend>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.

 <label>s are set to display: inline-block to allow margin to be applied.

 <input>s, <select>s, <textarea>s, and <button>s are mostly addressed by Normalize, but
Reboot removes their margin and sets line-height: inherit, too.

 <textarea>s are modified to only be resizable vertically as horizontal resizing often

“breaks” page layout.

2.2.4 COMPONENTS

BUTTON TAGS

The .btn classes are designed to be used with the <button> element. However, you can also use
these classes on <a> or <input> elements.

11
When using button classes on <a> elements that are used to trigger in-page functionality (like
collapsing content), rather than linking to new pages or sections within the current page, these
links should be given a role="button" to appropriately convey their purpose to assistive
technologies such as screen readers.

Link Button

<a class="btn btn-primary" href="#" role="button">Link</a>

<button class="btn btn-primary" type="submit">Button</button>

<input class="btn btn-primary" type="button" value="Input">

<input class="btn btn-primary" type="submit" value="Submit">

<input class="btn btn-primary" type="reset" value="Reset">

MODAL

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user
notifications, or completely custom content.

How it works

Before getting started with Bootstrap’s modal component, be sure to read the following as our
menu options have recently changed.

 Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything
else in the document and remove scroll from the <body> so that modal content scrolls
instead.

 Clicking on the modal “backdrop” will automatically close the modal.

 Bootstrap only supports one modal window at a time. Nested modals aren’t supported as
we believe them to be poor user experiences.

12
  Modals use position: fixed, which can sometimes be a bit particular about its rendering.
Whenever possible, place your modal HTML in a top-level position to avoid potential
interference from other elements. You’ll likely run into issues when nesting
a .modal within another fixed element.

$('#myModal').on('shown.bs.modal', function () {

$('#myInput').trigger('focus')

})

2.2.5 UTILITIES

BORDER

Use border utilities to quickly style the border and border-radius of an element. Great for images,
buttons, or any other element. Use border utilities to add or remove an element’s borders. Choose
from all borders or one at a time.

Additive -

<span class="border"></span>

<span class="border-top"></span>

<span class="border-right"></span>

<span class="border-bottom"></span>

<span class="border-left"></span>

Subtractive -

<span class="border-0"></span>

<span class="border-top-0"></span>

13
<span class="border-right-0"></span>

<span class="border-bottom-0"></span>

<span class="border-left-0"></span>

BORDER COLOR

Change the border color using utilities built on our theme colours.

<span class="border border-primary"></span>

<span class="border border-secondary"></span>

<span class="border border-success"></span>

<span class="border border-danger"></span>

<span class="border border-warning"></span>

<span class="border border-info"></span>

<span class="border border-light"></span>

<span class="border border-dark"></span>

<span class="border border-white"></span>

BORDER RADIUS

Add classes to an element to easily round its corners.

<img src="..." alt="..." class="rounded">

<img src="..." alt="..." class="rounded-top">

<img src="..." alt="..." class="rounded-right">

14
<img src="..." alt="..." class="rounded-bottom">

<img src="..." alt="..." class="rounded-left">

<img src="..." alt="..." class="rounded-circle">

<img src="..." alt="..." class="rounded-0">

COLOURS

Convey meaning through color with a handful of color utility classes. Includes support for styling
links with hover states, too.

Color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

<p class="text-primary">.text-primary</p>

<p class="text-secondary">.text-secondary</p>

15
<p class="text-success">.text-success</p>

<p class="text-danger">.text-danger</p>

<p class="text-warning">.text-warning</p>

<p class="text-info">.text-info</p>

<p class="text-light bg-dark">.text-light</p>

<p class="text-dark">.text-dark</p>

<p class="text-muted">.text-muted</p>

<p class="text-white bg-dark">.text-white</p>

Contextual text classes also work well on anchors with the provided hover and focus states. Note
that the .text-white and .text-muted class has no link styling.

2.3 ABOUT PYTHON

2.3.1 INTRODUCTION

Python is an interpreted high-level programming language for general-purpose

programming. Created by Guido van Rossum and first released in 1991, Python has a design
philosophy that emphasizes code readability, notably using significant whitespace. It provides
constructs that enable clear programming on both small and large scales. Python features a
dynamic type system and automatic memory management. It supports multiple programming
paradigms, including object-oriented, imperative, functional and procedural, and has a large and
comprehensive standard library.

NUMBERS

The interpreter acts as a simple calculator: you can type an expression at it and it will write the
value. Expression syntax is straightforward: the operators +, -, * and / work just like in most other
languages, parentheses (()) can be used for grouping. For example:

16
>>> 2 + 2

>>> 50 - 5*6

20

>>> (50 - 5*6) / 4

5.0

>>> 8 / 5

1.6

Division (/) always returns a float. To do floor division and get an integer result you can use the
// operator, to calculate the remainder you can use %. With Python, it is possible to use the **
operator to calculate powers.

The equal sign (=) is used to assign a value to a variable. Afterwards, no result is displayed before
the next interactive prompt:

>>> width = 20

>>> height = 5 * 9

>>> width * height

900

STRINGS

Besides numbers, Python can also manipulate strings, which can be expressed in several ways.
They can be enclosed in single quotes ('...') or double quotes ("...") with the same result. \ can be
used to escape quotes.

17
In the interactive interpreter, the output string is enclosed in quotes and special characters are
escaped with backslashes. While this might sometimes look different from the input, the two
strings are equivalent. The string is enclosed in double quotes if the string contains a single quote
and no double quotes, otherwise it is enclosed in single quotes. The print() function produces a
more readable output, by omitting the enclosing quotes and by printing escaped and special
characters.

Strings can be concatenated with the + operator, and repeated with *.Two or more string literals
next to each other are automatically concatenated. Python strings cannot be changed, they are
immutable. Therefore, assigning to an indexed position in the string results in an error:

The built-in function len() returns the length of a string:

>>> s = 'supercalifragilisticexpialidocious'

>>> len(s)

34

LISTS

Python knows a number of compound data types, used to group together other values. The most
versatile is the list, which can be written as a list of comma-separated values (items) between
square brackets. Lists might contain items of different types, but usually the items all have the
same type.

>>> squares = [1, 4, 9, 16, 25]

>>> squares

[1, 4, 9, 16, 25]

Like strings, lists can be indexed and sliced:

>>> squares[0] # indexing returns the item

18
>>> squares[-1]

25

>>> squares[-3:]

[9, 16, 25]

You can also add new items at the end of the list, by using the append() method:

>>> cubes.append(216) # add the cube of 6

>>> cubes.append(7 ** 3) # and the cube of 7

>>> cubes

[1, 8, 27, 64, 125, 216, 343]

The built-in function len() also applies to lists:

>>> letters = ['a', 'b', 'c', 'd']

>>> len(letters)

2.3.2 CLASSES

The simplest form of class definition looks like this:

class ClassName:
<statement-1>
.
.
<statement-N>

19
Class definitions, like function definitions must be executed before they have any effect. In
practice, the statements inside a class definition will usually be function definitions, but other
statements are allowed, and sometimes useful — we’ll come back to this later. The function
definitions inside a class normally have a peculiar form of argument list, dictated by the calling
conventions for methods.

CLASS OBJECTS

Class objects support two kinds of operations: attribute references and instantiation.

Attribute references use the standard syntax used for all attribute references in Python: obj.name.
Valid attribute names are all the names that were in the class’s namespace when the class object
was created. So, if the class definition looked like this:

class MyClass:
"""A simple example class"""
i = 12345

def f(self):
return 'hello world'

then MyClass.i and MyClass.f are valid attribute references, returning an integer and a function
object, respectively.

Class instantiation uses function notation. Just pretend that the class object is a parameter less
function that returns a new instance of the class. For example:

x = MyClass()

creates a new instance of the class and assigns this object to the local variable x.

The instantiation operation creates an empty object. Many classes like to create objects with
instances customized to a specific initial state. Therefore a class may define a special method
named __init__(), like this:

20
def __init__(self):
self.data = []

When a class defines an __init__() method, class instantiation automatically invokes __init__() for
the newly-created class instance. So in this example, a new, initialized instance can be obtained
by:

x = MyClass()

INSTANCE OBJECTS

There are two kinds of valid attribute names, data attributes and methods.

data attributes correspond to “instance variables” in Smalltalk, and to “data members” in C++.
Data attributes need not be declared; like local variables, they spring into existence when they are
first assigned to. For example, if x is the instance of MyClass created above, the following piece
of code will print the value 16, without leaving a trace:

x.counter = 1
while x.counter < 10:
x.counter = x.counter * 2
print(x.counter)
del x.counter

The other kind of instance attribute reference is a method. A method is a function that “belongs
to” an object. Valid method names of an instance object depend on its class. By definition, all
attributes of a class that are function objects define corresponding methods of its instances. So in
our example, x.f is a valid method reference, since MyClass.f is a function, but x.i is not, since
MyClass.i is not. But x.f is not the same thing as MyClass.f — it is a method object, not a function
object.

21
2.3.3 TKINTER

The tkinter package is the standard Python interface to the Tk GUI toolkit. Both Tk and tkinter are
available on most Unix platforms, as well as on Windows systems. You can check that tkinter is
properly installed on your system by running python -m tkinter from the command line,this should
open a window demonstrating a simple Tk interface.

TKINTER MODULES

Most of the time, tkinter is all you really need, but a number of additional modules are available
as well. The Tk interface is located in a binary module named _tkinter. This module contains the
low-level interface to Tk, and should never be used directly by application programmers. It is
usually a shared library but might in some cases be statically linked with the Python interpreter.

In addition to the Tk interface module, tkinter includes a number of Python modules,

tkinter.constants being one of the most important. Importing tkinter will automatically import
tkinter.constants, so, usually, to use Tkinter all you need is a simple import statement:

import tkinter

Or, more often:

from tkinter import *

class tkinter.Tk(screenName=None, baseName=None, className='Tk', useTk=1)

The Tk class is instantiated without arguments. This creates a toplevel widget of Tk which usually
is the main window of an application. Each instance has its own associated Tcl interpreter.

tkinter.Tcl(screenName=None, baseName=None, className='Tk', useTk=0)

The Tcl() function is a factory function which creates an object much like that created by the Tk
class, except that it does not initialize the Tk subsystem. This is most often useful when driving
the Tcl interpreter in an environment where one doesn’t want to create extraneous toplevel

22
windows, or where one cannot. An object created by the Tcl() object can have a Toplevel window
created by calling its loadtk() method.

2.4 ABOUT DJANGO

2.4.1 INTRODUCTION

Django is a high-level Python Web framework that encourages rapid development and
clean, pragmatic design. Built by experienced developers, it takes care of much of the
hassle of Web development, so you can focus on writing your app without needing to
reinvent the wheel. It’s free and open source.

 Django was designed to help developers take applications from concept to completion as
quickly as possible.

 Django includes dozens of extras you can use to handle common Web development tasks.
Django takes care of user authentication, content administration, site maps, RSS feeds, and
many more tasks — right out of the box.

 Django takes security seriously and helps developers avoid many common security
mistakes, such as SQL injection, cross-site scripting, cross-site request forgery and
clickjacking. Its user authentication system provides a secure way to manage user accounts
and passwords.

 Some of the busiest sites on the planet use Django’s ability to quickly and flexibly scale to
meet the heaviest traffic demands.

 Companies, organizations and governments have used Django to build all sorts of things
— from content management systems to social networks to scientific computing platforms.

23
 MODEL BASED VIEWS

Creating class based models in Django is equivalent to creating tables in database. Django
handles sqlite3 database. We need to create the models with various fields like CharField,
IntegerField, FileField etc., with proper arguments and migrate them to the database using
the command: python manage.py migrate –app_name.
All the objects that are created to these models are imported into the views and rendered
into the respective html files.

The control and data flow in Django is as follows:

Models -> Views -> Templates

The models that are used and accessed in OnMaps are:

 Profile: Profile for the sellers included with position field for co-ordinates (latitude and
longitude) in Google Maps.

 Goods: A model for commodities with attributes like name, price, category and stock etc.

TEMPLATING
 Django has it’s own templating engine similar Jinja templating. It’s basic purpose is to
render the data from the database to the front-end i.e., the HTML files.
 The syntax involves using {{ }} and {%%}.
 All the fields that are being returned by the respective views can be rendered here.
 Various forms like User registration forms, profile forms etc., are rendered using Django
templates.

ADMIN & AUTHENTICATION

One of the most powerful parts of Django is its automatic admin interface. It reads metadata
in your models to provide a powerful and production-ready interface that content producers

24
 can immediately use to start managing content on your site. It’s easy to set up and provides
many hooks for customization.

 Django comes with a full-featured and secure authentication system. It handles user
accounts, groups, permissions and cookie-based user sessions. This lets you easily build
sites that let users to create accounts and safely log in/out.

SECYRITY

Django provides multiple protections against:

 Clickjacking
 Cross-site scripting
 Cross Site Request Forgery (CSRF)
 SQL injection
 Remote code execution

2.4.2 DESIGN THE MODEL

Although you can use Django without a database, it comes with an object-relational mapper in
which you describe your database layout in Python code. The data-model syntax offers many
rich ways of representing your models – so far, it’s been solving many years’ worth of database-
schema problems. Here’s a quick example:

mysite/news/models.py

from django.db import models

class Reporter(models.Model):

full_name = models.CharField(max_length=70)

25
 def __str__(self):

return self.full_name

class Article(models.Model):

pub_date = models.DateField()

headline = models.CharField(max_length=200)

content = models.TextField()

reporter = models.ForeignKey(Reporter, on_delete=models.CASCADE)

def __str__(self):

return self.headline

Once your models are defined, Django can automatically create a professional, production ready
administrative interface – a website that lets authenticated users add, change and delete objects.
It’s as easy as registering your model in the admin site:

mysite/news/models.py

from django.db import models

class Article(models.Model):

pub_date = models.DateField()

headline = models.CharField(max_length=200)

content = models.TextField()

reporter = models.ForeignKey(Reporter, on_delete=models.CASCADE)

mysite/news/admin.py

from django.contrib import admin

from . import models

admin.site.register(models.Article)

26
The philosophy here is that your site is edited by a staff, or a client, or maybe just you – and you
don’t want to have to deal with creating backend interfaces just to manage content.

DESIGNING THE URLS

A clean, elegant URL scheme is an important detail in a high-quality Web application. Django
encourages beautiful URL design and doesn’t put any cruft in URLs, like .php or .asp. To design
URLs for an app, you create a Python module called a URLconf. A table of contents for your app,
it contains a simple mapping between URL patterns and Python callback functions. URLconfs also
serve to decouple URLs from Python code. Here’s what a URLconf might look like for the
Reporter/Article example above:

mysite/news/urls.py

from django.urls import path

from . import views

urlpatterns = [

path('articles/<int:year>/', views.year_archive),

path('articles/<int:year>/<int:month>/', views.month_archive),

path('articles/<int:year>/<int:month>/<int:pk>/', views.article_detail),

The code above maps URL paths to Python call-back functions (“views”). The path strings use
parameter tags to “capture” values from the URLs.

2.4.3 WRITE YOUR VIEWS

Each view is responsible for doing one of two things: Returning an HttpResponse object containing
the content for the requested page, or raising an exception such as Http404. The rest is up to you.
Generally, a view retrieves data according to the parameters, loads a template and renders the
template with the retrieved data. Here’s an example view for year_archive from above:

mysite/news/views.py

27
 from django.shortcuts import render

from .models import Article

def year_archive(request, year):

a_list = Article.objects.filter(pub_date__year=year)

context = {'year': year, 'article_list': a_list}

return render(request, 'news/year_archive.html', context)

2.4.4 DESIGN YOUR TEMPLATES

The code above loads the news/year_archive.html template. Django has a template search path,
which allows you to minimize redundancy among templates. In your Django settings, you specify
a list of directories to check for templates with DIRS. If a template doesn’t exist in the first
directory, it checks the second, and so on.

Let’s say the news/year_archive.html template was found. Here’s what that might look like:

mysite/news/templates/news/year_archive.html

{% extends "base.html" %}

{% block title %}Articles for {{ year }}{% endblock %}

{% block content %}

<h1>Articles for {{ year }}</h1>

{% for article in article_list %}

<p>{{ article.headline }}</p>

<p>By {{ article.reporter.full_name }}</p>

<p>Published {{ article.pub_date|date:"F j, Y" }}</p>

{% endfor %}

{% endblock %}

28
Variables are surrounded by double-curly braces. {{ article.headline }} means “Output the value
of the article’s headline attribute.” But dots aren’t used only for attribute lookup. They also can do
dictionary-key lookup, index lookup and function calls.

29
 3. SOFTWARE REQUIREMENT SPECIFICATION

3.1 INTRODUCTION
The requirements specification is a technical specification of requirements for the software
products. It is the first step in the requirements analysis process it lists the requirements of a
particular software system including functional, performance and security requirements. The
requirements also provide usage scenarios from a user, an operational and an administrative
perspective. The purpose of software requirements specification is to provide a detailed overview
of the software project, its parameters and goals. This describes the project target audience and its
user interface, hardware and software requirements. It defines how the client, team and audience
see the project and its functionality.

3.1.1 PURPOSE OF THE DOCUMENT

This software requirement specification describes all the requirements elicited for
“Mastermind” and is intended to be used by the members examining the project and implementing
and verifying the application. Unless otherwise noted all requirements are of high priority and are
committed.

3.2 USERS AND THEIR CHARACTERISTICS

Mastermind webpage is useful to the users to know more about training their minds’, and it
helps improving working memory for people of all age groups in a fun and an interesting
way.

3.3 SOFTWARE AND HARDWARE REQUIREMENTS

Operating System Windows 7 and higher

Programming Languages HTML , Bootstrap

Sever side Script Python, Django
Database None
Processor Intel® Core™ i3 CPU M 350 @2.27GHz

Ram 1 GB or higher

Disk Space 500 MB

30
 4. IMPLEMENTATION

4.1 INTRODUCTION

The success of the software product is determined only when it is successfully implemented
according to the requirements. The analysis and the design of the proposed system provide a
perfect platform to implement the idea using the specified technology in the desired environment.
The implementation of our system is made user friendly.

Any software project is designed in modules and the project is said to be successfully implemented
when each of the module is executed individually to obtain the expected result and also, when all
the modules are integrated and run together without any errors.

4.2 HTML
HTML was used to build the basic structure and display the contents of the Webpages in
the website. The basic structure of home page of the website and the articles were built using
HTML. They have slight differences in their structures. It includes the Bootstrap and Java Script
files required for the website.

4.3 BOOTSTRAP
Bootstrap was used to make the design of the website. The logo of the website and the layout
of the header and footer was done using Bootstrap. It was also used for the main layout design of
the home page and the articles.

4.4 PYTHON
Python is used to define the behavior of the game in response to the interaction with the
user. The game itself is entirely developed in python. It provides dynamic interactivity and
provides services to the user side of the browser.

4.5 DJANGO

Django is used to put together the server side script i.e. Python and the client side interface and
webpage together. It is essentially used to run the Python script from a webpage. The Django

31
interface provides the link between the server-side and client-side scripts, affectively making it
possible to run the server-side script by any user.

4.6 HOSTING THE WEBSITE

• The Mastermind website is hosted using the functionality of GitHub.

• GitHub is a web-based Git or version control repository and Internet hosting service. It is
mostly used for code.

• Small websites can be hosted from public repositories on GitHub. The URL format is
https://username.github.io./

32
 5. TESTING AND RESULTS

5.1 INTRODUCTION
Software testing is a critical element of software quality assurance and represents the
ultimate review of specification, design and coding. In fact, testing is the one step in the software
engineering process that could be viewed as destructive rather than constructive.

A strategy for software testing integrates software test case design methods into a well-
planned series of steps that result in the successful construction of software. Testing is the set of
activities that can be planned in advance and conducted systematically. The underlying motivation
of program testing is to affirm software quality with methods that can economically and effectively
apply to both strategic to both large and small-scale systems.

5.2 TESTING OBJECTIVES

The main objective of performance testing is designed to test whether the website’s display
is as expected and whether the website is functioning properly or not.

As the test results are gathered and evaluated they begin to give a qualitative indication of the
reliability of the website. If proper output is not obtained, the overall quality of the Website is
questioned. If, on the other hand, all the results which are not successful, are encountered, and are
easily modifiable, then the following conclusion can be made: The tests are inadequate as the
requirements mentioned are not compatible. The testing includes:

 Checking whether the information is displayed or not.

 Checking whether all the links between each webpage in the website works or is
misdirected.
 Verifying if all the pictures are displayed and none of the files are corrupted.

33
5.3 OUTPUT SCREENS

Fig 5.1.Home Page

The above figure shows the home page of the website containing the various navigation buttons
and the ‘Play Game’ button.

34
Fig 5.1.1. Home Page – How to Play

Fig 5.1.2 Home Page – First Rule

35
Fig 5.2 An Important One - Hint

Fig 5.3 Game Window

36
Fig 5.3 (a) Game Window – Game Won

Fig 5.3 (b) Game Window – Game Lost

37
 6. CONCLUSION AND FUTURE SCOPE

Our webpage “Mastermind” is designed in such a way that future modifications can be done
easily.

It is one destination to give you a brief idea about ‘mastermind the game’ and how it can help
train a person’s memory.

The following conclusion can be deduced from the development of our project.

 Automation of the entire system improves the efficiency.

 It provides a friendly graphical user interface which proves to be better than the existing
system.

 It reduces the gap between the developer and the user.

 It gives appropriate access to the authorized users depending on their permissions.

 Updating of information becomes easier.

 The system has adequate scope for modification in future if necessary.

This application avoids the manual work and the timeless concern with it. The next enhancement
is, we will develop online services. And also in future, we want to include the score of the
respective user. In this the gamers/users will have the same limited time in which they can score
as much as possible.

38
 REFERENCES

BOOK REFERENCES –

 HTML & CSS: Design and Build Web Sites

Book by Jon Duckett
 Bootstrap: Responsive Web Development
Book by Jake Spurlock
 Django: Web Development with Python
Book by Samuel Dauzon
 Python : The Complete Beginners Guide - Step By Step Instruction
Book by Byron Francis

WEB REFERENCES-

1. https://www.w3schools.com/html/default.asp
2. https://getbootstrap.com/
3. https://www.djangoproject.com/

4. https://www.tutorialspoint.com/python/index.htm

39