diff --git a/org.fortiss.af3.rcp.help/html/requirements/.ratings b/org.fortiss.af3.rcp.help/html/requirements/.ratings
index 458d55d2d1bffc1e7ad5414ee9e8c98dc7aca445..b08534dc582c2a117d274fd09ebdd7dcf526f632 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/.ratings
+++ b/org.fortiss.af3.rcp.help/html/requirements/.ratings
@@ -1,3 +1,3 @@
-MIRA.glossary.html 72db44909e982b0a3999054fbbf3dc589cb235d1 YELLOW
-MIRA.requirements.html b0cc481d8fce753a834572074d96b4ef35b4a308 YELLOW
-MIRA.requirements_analysis.html 1360028c00157532965ec592fad9dc1f28aa5c0e YELLOW
+MIRA.glossary.html 303a7ebe0c884e61a36039151881ce2944c90af8 YELLOW
+MIRA.requirements.html 590726c7e850abae6ae5ec07853ce48b9c143f41 YELLOW
+MIRA.requirements_analysis.html 6c3237e845e5b13c7399c93468289d2a7ebd3ad0 YELLOW
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
index d074dba6eff13062a76618bf0c1043e74074c5a3..303a7ebe0c884e61a36039151881ce2944c90af8 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
+++ b/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
@@ -9,56 +9,107 @@
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>MIRA - Creating a Requirements Glossary using AutoFOCUS3 (AF3)</title>
+ <link rel="stylesheet" type="text/css" href="stylesheet.css">
+</head>
+
+<div class="navbar">
+
+ <div class="dropdown">
+ <button class="dropbtn">Home <i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-content">
+ <a href="../getting_started.html"> Main Page</a>
+ <a href="#">Modeling and Simulation</a>
+ <a href="#">Deployment and Code Generation</a>
+ <a href="#">Design Space Exploration (DSE)</a>
+ <a href="#">Assurance Case Modeling</a>
+ <a href="#">Further Resources</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-content">
+ <a href="MIRA.requirements_analysis.html">Requirements Analysis</a>
+ <a href="MIRA.requirements.html">Requirements Creation</a>
+ </div>
+ </div>
+<div class="topnav-right">
+ <a href="mailto:af_user@lists.fortiss.org?subject=Reporting 'MIRA.Glossary.html' Documentation Problem!&body= Dear Af3 team, I am reporting an issue related to Glossary Creation Page.
+ {Please specify the problem precisely here.}.">Report a Problem?</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
</head>
-<body>
-<h2><font color="#336699">Creating a Glossary</font></h2>
-A glossary is used to capture the vocabulary of the problem domain. Once created, the glossary is automatically linked to the requirements. Using the glossary it is easily visible whether the agreed vocabulary is used in all descriptions.
-<br><br>
-To create a new glossary, select <i>Glossary</i> in the context menu of a requirements analysis.
-<br><br>
-<img src="./pictures/MIRA.Glossary.NewGlossary.png">
-<br><br>
+<div class="box">
+<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
-<br><br>
-You can create multiple glossary nodes with specific names (set in the properties view) to group your glossary terms.
-
-<h3><font color="#336699">Creating Glossary Entries</font></h3>
+<h2>Creating a Glossary</h2>
+
+<p> A glossary is used to capture the vocabulary of the problem domain. Once created, the glossary is automatically linked to the requirements.
+Using the glossary it is easily visible whether the agreed vocabulary is used in all descriptions.
+To create a new glossary, select <i>Glossary</i> in the context menu of a requirements analysis.</p>
+
+<img src="./pictures/MIRA.Glossary.NewGlossary.png" height: auto; align:center;>
+
+<p>You can create multiple glossary nodes with specific names (set in the properties view) to group your glossary terms.</p>
+<body>
+<h3>Creating Glossary Entries</h3>
-In the context menu of the glossary node you can then create glossary entries by clicking <i>Entry</i>.
-<br><br>
-<img src="./pictures/MIRA.Glossary.NewEntry.png">
+<p> In the context menu of the glossary node you can then create glossary entries by clicking <i>Entry</i>. </p>
-<h2><font color="#336699">Glossary Overview</font></h2>
+<img src="./pictures/MIRA.Glossary.NewEntry.png" height: auto; align:center;>
-By double-clicking on the <i>Glossary</i> node, an overview over all glossary entries opens.
+<h2>Glossary Overview</h2>
-<br><br>
-<img src="./pictures/MIRA.GlossaryOverview.png">
-<br><br>
+<p> By double-clicking on the <i>Glossary</i> node, an overview over all glossary entries opens. </p>
-The list of glossary entries can be sorted by clicking on the column headers of the overview list.
-You can filter the glossary entries by inserting filter text in the filter section. Double-clicking on a column opens the corresponding glossary entry.
+<img class="center" src="./pictures/MIRA.GlossaryOverview.png" width:100px; align:center;>
+
+<p> The list of glossary entries can be sorted by clicking on the column headers of the overview list.
+You can filter the glossary entries by inserting filter text in the filter section. Double-clicking on a column opens the corresponding glossary entry. </p>
-<h2><font color="#336699">Specifying Glossary Entries</font></h2>
+<h2>Specifying Glossary Entries</h2>
-For each entry you should at least specify the <i>name</i> (the vocabulary term it represents). In the <i>definition</i> field you should enter what this term means in your problem domain.
-An entry also has a <i>status</i> field (Options: New, In consolidation, Consolidated) which can be used to consolidate it with others.
+<p>For each entry you should at least specify the <i>name</i> (the vocabulary term it represents). In the <i>definition</i> field you should enter what this term means in your problem domain. An entry also has a <i>status</i> field (Options: New, In consolidation, Consolidated) which can be used to consolidate it with others.
Furthermore you can specify <i>abbreviations</i> and <i>synonyms</i> for the entry and add a comment.
-In <i>names</i>, <i>abbreviations</i> and <i>synonyms</i> only the special characters (might use text style type writter)"-_/’()" are allowed.
-<br><br>
-<img src="./pictures/MIRA.Glossary.GlossaryEntry.png">
-<br><br>
+In <i>names</i>, <i>abbreviations</i> and <i>synonyms</i> only the special characters <tt><b>"-_/’()"</b></tt>are allowed.</p>
+
+<img src="./pictures/MIRA.Glossary.GlossaryEntry.png"align:center;>
-For further description of the entry you can add pictures. To add a picture click on the <i>Add</i> button and choose an image file in the dialog.
+<p>For further description of the entry you can add pictures. To add a picture click on the <i>Add</i> button and choose an image file in the dialog.
You can add as many pictures as you want.
Each image has a description field which can be used to give information about the picture and to number the pictures.
-If you click on an added picture, it should be displayed in full resolution in your systems picture viewer. <br>
+If you click on an added picture, it should be displayed in full resolution in your systems picture viewer. <br>
When you add a picture it is copied into the <i>Images</i> folder in the project directory, next to your .af3_20 file.
-If you want to send the model file to someone else, you should also send the <i>Images</i> folder.
+If you want to send the model file to someone else, you should also send the <i>Images</i> folder. </p>
+</div>
+
+<script>
+//Get the button
+var mybutton = document.getElementById("myBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+ if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+ mybutton.style.display = "block";
+ } else {
+ mybutton.style.display = "none";
+ }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function topFunction() {
+ document.body.scrollTop = 0;
+ document.documentElement.scrollTop = 0;
+}
+</script>
+
+
</body>
</html>
\ No newline at end of file
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary1.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary1.html
deleted file mode 100644
index a0cf25d11235dea55ec9c0f8bdea7aaa1de019f0..0000000000000000000000000000000000000000
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary1.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
-<!--
- Documentation of MIRA - Model-based Integrated Requirements Analysis.
-
- @author becker
- @ConQAT.Rating GREEN Hash: 850E39092E4DF6F9EEB6D26D886BEF68
--->
-
-<html>
-<head>
- <link rel="stylesheet" type="text/css" href="stylesheet.css">
-
-<style>
- * {
- margin: 0;
- padding: 0;
- }
- .imgbox {
- display: grid;
- height: 100%;
- }
- .center-fit {
- max-width: 100%;
- max-height: 100vh;
- margin: auto;
- }
- </style>
-</head>
-
-<div class="navbar">
- <a href="../getting_started.html">Home</a>
- <div class="dropdown">
- <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
- <div class="dropdown-content">
- <a href="MIRA.requirements_analysis1.html">Requirements Analysis</a>
- <a href="MIRA.requirements1.html">Requirements Creation</a>
- </div>
- </div>
-<div class="topnav-right">
-<div class="dropdown">
- <button class="dropbtn">Report a Problem?<i class="fa fa-caret-down"></i></button>
- <div class="dropdown-content">
- <a href="mailto:af_user@lists.fortiss.org">Figure Error</a>
- <a href="mailto:af_user@lists.fortiss.org">Documentation Error</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
-</head>
-<body>
-
-<h2>Creating a Glossary</h2>
-
-A glossary is used to capture the vocabulary of the problem domain. Once created, the glossary is automatically linked to the requirements. Using the glossary it is easily visible whether the agreed vocabulary is used in all descriptions.
-<br><br>
-To create a new glossary, select <i>Glossary</i> in the context menu of a requirements analysis.
-
-<br><br>
-<img src="./pictures/MIRA.Glossary.NewGlossary.png">
-<br><br>
-
-<br><br>
-You can create multiple glossary nodes with specific names (set in the properties view) to group your glossary terms.
-
-<h3>Creating Glossary Entries</h3>
-
-In the context menu of the glossary node you can then create glossary entries by clicking <i>Entry</i>.
-<br><br>
-<img src="./pictures/MIRA.Glossary.NewEntry.png">
-
-<h2>Glossary Overview</h2>
-
-By double-clicking on the <i>Glossary</i> node, an overview over all glossary entries opens.
-
-<br><br>
-<img src="./pictures/MIRA.GlossaryOverview.png">
-<br><br>
-
-The list of glossary entries can be sorted by clicking on the column headers of the overview list.
-You can filter the glossary entries by inserting filter text in the filter section. Double-clicking on a column opens the corresponding glossary entry.
-
-<h2>Specifying Glossary Entries</h2>
-
-For each entry you should at least specify the <i>name</i> (the vocabulary term it represents). In the <i>definition</i> field you should enter what this term means in your problem domain.
-An entry also has a <i>status</i> field (Options: New, In consolidation, Consolidated) which can be used to consolidate it with others.
-Furthermore you can specify <i>abbreviations</i> and <i>synonyms</i> for the entry and add a comment.
-
-In <i>names</i>, <i>abbreviations</i> and <i>synonyms</i> only the special characters <div class="typewriter"><b>"-_/’()"</b></div> are allowed.
-<br><br>
-<img src="./pictures/MIRA.Glossary.GlossaryEntry.png">
-<br><br>
-
-For further description of the entry you can add pictures. To add a picture click on the <i>Add</i> button and choose an image file in the dialog.
-You can add as many pictures as you want.
-Each image has a description field which can be used to give information about the picture and to number the pictures.
-If you click on an added picture, it should be displayed in full resolution in your systems picture viewer. <br>
-When you add a picture it is copied into the <i>Images</i> folder in the project directory, next to your .af3_20 file.
-If you want to send the model file to someone else, you should also send the <i>Images</i> folder.
-</body>
-</html>
\ No newline at end of file
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements.html
index a39563fdfe773aa21bce5ebcbf1664307c0ac3ea..590726c7e850abae6ae5ec07853ce48b9c143f41 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements.html
+++ b/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements.html
@@ -1,46 +1,92 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head><!--
- Documentation of MIRA - Model-based Integrated Requirements Analysis.
-
- @author becker
- @ConQAT.Rating GREEN Hash: 9E1B5106815B8C6D8DF2ECC5890F5C39
--->
- <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
- <title>MIRA - Creating a Requirements Analysis using AutoFOCUS3 (AF3)</title>
-</head>
-<body>
-
-<h2><font color="#336699">Create a Requirements Node</font></h2>
-
-<p>Before creating <i>Requirements</i>, you have to create a <a href="MIRA.requirements_analysis.html">Requirements Analysis</a> node.<br />
-<br />
-Create a new <i>Requirements</i> node by choosing <i>Requirements</i>, in the context menu of the <i>Requirements Analysis</i> node.<br />
-<br />
-<img src="./pictures/MIRA.Requirements.NewRequirements.png" /><br />
-<br />
-<br />
-<br />
-Change the name of a <i>Requirements</i> node in the properties view. You also can create multiple requirement nodes with different names to organize your requirements.</p>
-
-<h2><font color="#336699">Requirements Overview</font></h2>
-
-<p>By double-clicking on the <i>Requirements</i> node, an overview over all requirements opens.<br />
-<br />
-<img src="./pictures/MIRA.RequirementsOverview.png" /><br />
-<br />
-The list of requirements can be sorted by clicking on the column headers of the overview list. You can filter the requirements by inserting a filter text in the filter section. Double-clicking on a column opens the corresponding requirement source element.</p>
-
-<h2><font color="#336699">Requirements Packages</font></h2>
-
-<p>Requirements are structured by <i>Requirements Packages</i>.<br />
-<br />
-<img src="./pictures/MIRA.Requirements.Packages.png" /></p>
-
-<h2><font color="#336699">Specify Requirements</font></h2>
-
-<p>To add a new requirement, open the context menu of the requirements node. You can choose between the following requirement types:</p>
-
-<p><img src="./pictures/MIRA.Requirements.NewRequirement.png" /><br />
-</body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+<head><link rel="stylesheet" type="text/css" href="stylesheet.css">
+</head>
+<body>
+<div class="navbar">
+<div class="dropdown">
+ <button class="dropbtn">Home <i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-content">
+ <a href="../getting_started.html"> Main Page</a>
+ <a href="#">Modeling and Simulation</a>
+ <a href="#">Deployment and Code Generation</a>
+ <a href="#">Design Space Exploration (DSE)</a>
+ <a href="#">Assurance Case Modeling</a>
+ <a href="#">Further Resources</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-content">
+ <a href="MIRA.requirements_analysis.html">Requirements Analysis</a>
+ <a href="MIRA.glossary.html">Glossary Creation</a>
+ </div>
+ </div>
+<div class="topnav-right">
+ <a href="mailto:af_user@lists.fortiss.org?subject=Reporting 'MIRA.requirements.html' Documentation Problem!&body= Dear Af3 team, I am reporting an issue related to Requirements Creation Page.
+ {Please specify the problem precisely here.}.">Report a Problem?</a>
+</div>
+
+ </div>
+ </div>
+ </div>
+</div>
+<body>
+
+<div class="box">
+<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
+<h2>Create a Requirements Node</h2>
+
+<p>Before creating <i>Requirements</i>, you have to create a <a href="MIRA.requirements_analysis.html" target="_blank">Requirements Analysis</a> node.</p>
+<p> Create a new <i>Requirements</i> node by choosing <i>Requirements</i>, in the context menu of the <i>Requirements Analysis</i> node.</p>
+
+<img src="./pictures/MIRA.Requirements.NewRequirements.png" height: auto; />
+
+<p> Change the name of a <i>Requirements</i> node in the properties view. You also can create multiple requirement nodes with different names to organize your requirements.</p>
+
+<h2>Requirements Overview</h2>
+
+<p>By double-clicking on the <i>Requirements</i> node, an overview over all requirements opens.</p>
+<img src="./pictures/MIRA.RequirementsOverview.png" height: auto;/><br />
+
+<p> The list of requirements can be sorted by clicking on the column headers of the overview list. You can filter the requirements by inserting a filter text in the filter section. Double-clicking on a column opens the corresponding requirement source element.</p>
+
+<h2>Requirements Packages</h2>
+
+<p>Requirements are structured by <i>Requirements Packages</i>.</p>
+
+<img src="./pictures/MIRA.Requirements.Packages.png" height: auto; />
+
+<h2>Specify Requirements</h2>
+
+<p>To add a new requirement, open the context menu of the requirements node. You can choose between the following requirement types:</p>
+
+<p><img src="./pictures/MIRA.Requirements.NewRequirement.png" height: auto;/>
+
+</div>
+<script>
+//Get the button
+var mybutton = document.getElementById("myBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+ if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+ mybutton.style.display = "block";
+ } else {
+ mybutton.style.display = "none";
+ }
+}
+
+// When the user clicks on the button, scroll to the top of the document
+function topFunction() {
+ document.body.scrollTop = 0;
+ document.documentElement.scrollTop = 0;
+}
+</script>
+
+
+</body>
+
+</html>
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements1.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements1.html
deleted file mode 100644
index d54cd30acf03b30f72fd6d0421632cdd2abd2db6..0000000000000000000000000000000000000000
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements1.html
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html>
-<head><link rel="stylesheet" type="text/css" href="stylesheet.css">
-<style>
-
-@media screen and (max-width: 600px) {
- .topnav a:not(:first-child), .dropdown .dropbtn {
- display: none;
- }
- .topnav a.icon {
- float: right;
- display: block;
- }
-}
-
-@media screen and (max-width: 600px) {
- .topnav.responsive {position: relative;}
- .topnav.responsive .icon {
- position: absolute;
- right: 0;
- top: 0;
- }
-}
-</style>
-
-
-</head>
-<body>
-<div class="navbar">
- <a href="../getting_started.html">Home</a>
- <div class="dropdown">
- <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
- <div class="dropdown-content">
- <a href="MIRA.requirements_analysis1.html">Requirements Analysis</a>
- <a href="MIRA.glossary1.html">Glossary Creation</a>
- </div>
- </div>
-<div class="topnav-right">
-<div class="dropdown">
- <button class="dropbtn">Report a Problem? <i class="fa fa-caret-down"></i></button>
- <div class="dropdown-content">
- <a href="mailto:af_user@lists.fortiss.org">Figure Error</a>
- <a href="mailto:af_user@lists.fortiss.org">Documentation Error</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
-<body>
-
-<h2>Create a Requirements Node</h2>
-
-<p>Before creating <i>Requirements</i>, you have to create a <a href="MIRA.requirements_analysis1.html" target="_blank">Requirements Analysis</a> node.<br />
-<br />
-Create a new <i>Requirements</i> node by choosing <i>Requirements</i>, in the context menu of the <i>Requirements Analysis</i> node.<br />
-<br />
-<img src="./pictures/MIRA.Requirements.NewRequirements.png" height: auto; /><br />
-<br />
-<br />
-<br />
-Change the name of a <i>Requirements</i> node in the properties view. You also can create multiple requirement nodes with different names to organize your requirements.</p>
-
-<h2>Requirements Overview</h2>
-
-<p>By double-clicking on the <i>Requirements</i> node, an overview over all requirements opens.<br />
-<br />
-<img src="./pictures/MIRA.RequirementsOverview.png" height: auto;/><br />
-<br />
-The list of requirements can be sorted by clicking on the column headers of the overview list. You can filter the requirements by inserting a filter text in the filter section. Double-clicking on a column opens the corresponding requirement source element.</p>
-
-<h2>Requirements Packages</h2>
-
-<p>Requirements are structured by <i>Requirements Packages</i>.<br />
-<br />
-<img src="./pictures/MIRA.Requirements.Packages.png" height: auto; /></p>
-
-<h2>Specify Requirements</h2>
-
-<p>To add a new requirement, open the context menu of the requirements node. You can choose between the following requirement types:</p>
-
-<p><img src="./pictures/MIRA.Requirements.NewRequirement.png" height: auto;/><br />
-</body>
-</html>
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis.html
index 1360028c00157532965ec592fad9dc1f28aa5c0e..6c3237e845e5b13c7399c93468289d2a7ebd3ad0 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis.html
+++ b/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis.html
@@ -1,39 +1,72 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
-<!--
- Documentation of MIRA - Model-based Integrated Requirements Analysis.
-
- @author becker
- @ConQAT.Rating YELLOW Hash: 26C75A61229717DC7D05E53111B31834
--->
+ <!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>MIRA - Creating a Requirements Analysis using AutoFOCUS3 (AF3)</title>
+<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
-<h2><font color="#336699">Create a Requirements Analysis Node</font></h2>
+<div class="navbar">
+ <div class="dropdown">
+ <button class="dropbtn">Home <i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-content">
+ <a href="../getting_started.html"> Main Page</a>
+ <a href="../ModandSim/model_element_attributes.html">Modeling and Simulation</a>
+ <a href="#">Deployment and Code Generation</a>
+ <a href="#">Design Space Exploration (DSE)</a>
+ <a href="#">Assurance Case Modeling</a>
+ <a href="#">Further Resources</a>
+ </div>
+ </div>
+ <div class="dropdown">
+ <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
+ <div class="dropdown-content">
+ <a href="MIRA.requirements.html">Requirements Creation</a>
+ <a href="MIRA.glossary.html">Glossary Creation</a>
+ </div>
+ </div>
+ <div class="topnav-right">
+ <a href="mailto:af_user@lists.fortiss.org?subject=Reporting 'MIRA.Requirements_analysis.html' Documentation Problem!&body= Dear Af3 team, I am reporting an issue related to Requirements Analysis Page.
+ {Please specify the problem precisely here.}.">Report a Problem?</a>
+ </div>
+</div>
-To create a new <i>Requirements Analysis Node</i> in project, open the context menu of the project by right-clicking on the project and select <i>Requirements Analysis</i>.
-<br><br>
-<img src="./pictures/MIRA.NewAnalysis.png">
-<br><br>
+<div class="box">
+<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
+<h2>Create a Requirements Analysis Node</h2>
+ <p>To create a new <i>Requirements Analysis Node</i> in project, open the context menu of the project by right-clicking on the project and select <i>Requirements Analysis</i>.</p>
+ <img class="center" src="./pictures/MIRA.NewAnalysis.png">
+ <p>In the same way, you can add more requirements analysis nodes to your project.</p>
-In the same way, you can add more requirements analysis nodes to your project.
+<h2>Requirements Overview</h2>
-<h2><font color="#336699">Requirements overview</font></h2>
+ <p>By double-clicking on the <i>Requirements Analysis</i> node, an overview over all requirements opens.</p>
+ <img class="center" src="./pictures/MIRA.RequirementsOverview.png">
-By double-clicking on the <i>Requirements Analysis</i> node, an overview over all requirements opens.
+ <p>The list of requirements can be sorted by clicking on the column headers of the overview list.
+ You can filter the requirements by inserting filter text in the filter section. Double-clicking on a requirement opens the corresponding requirement.</p>
+</div>
-<br><br>
-<img src="./pictures/MIRA.RequirementsOverview.png">
-<br><br>
+<script>
+//Get the button
+var mybutton = document.getElementById("myBtn");
-The list of requirements can be sorted by clicking on the column headers of the overview list.
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
-You can filter the requirements by inserting filter text in the filter section. Double-clicking on a requirement opens the corresponding requirement.
+function scrollFunction() {
+ if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+ mybutton.style.display = "block";
+ } else {
+ mybutton.style.display = "none";
+ }
+}
+// When the user clicks on the button, scroll to the top of the document
+function topFunction() {
+ document.body.scrollTop = 0;
+ document.documentElement.scrollTop = 0;
+}
+</script>
</body>
-</html>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis1.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis1.html
deleted file mode 100644
index c853f35670feac0b95ee2fb299fd2a6620a2dde3..0000000000000000000000000000000000000000
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.requirements_analysis1.html
+++ /dev/null
@@ -1,74 +0,0 @@
- <!DOCTYPE html>
-<html>
-<head>
-<link rel="stylesheet" type="text/css" href="stylesheet.css">
-<style>
-
-@media screen and (max-width: 600px) {
- .topnav a:not(:first-child), .dropdown .dropbtn {
- display: none;
- }
- .topnav a.icon {
- float: right;
- display: block;
- }
-}
-
-@media screen and (max-width: 600px) {
- .topnav.responsive {position: relative;}
- .topnav.responsive .icon {
- position: absolute;
- right: 0;
- top: 0;
- }
-}
-</style>
-
-
-</head>
-<body>
-<div class="navbar">
- <a href="../getting_started.html">Home</a>
- <div class="dropdown">
- <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
- <div class="dropdown-content">
- <a href="MIRA.requirements1.html">Requirements Creation</a>
- <a href="MIRA.glossary1.html">Glossary Creation</a>
- </div>
- </div>
-<div class="topnav-right">
-<div class="dropdown">
- <button class="dropbtn">Report a Problem? <i class="fa fa-caret-down"></i></button>
- <div class="dropdown-content">
- <a href="mailto:af_user@lists.fortiss.org">Figure Error</a>
- <a href="mailto:af_user@lists.fortiss.org">Documentation Error</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
-<div class="main">
- <h2>Create a Requirements Analysis Node</h2>
-To create a new <i>Requirements Analysis Node</i> in project, open the context menu of the project by right-clicking on the project and select <i>Requirements Analysis</i>.
-
-<br><br>
-<img src="./pictures/MIRA.NewAnalysis.png" height: auto;>
-<br><br>
-In the same way, you can add more requirements analysis nodes to your project.
-
-<h2>Requirements Overview</h2>
-
-By double-clicking on the <i>Requirements Analysis</i> node, an overview over all requirements opens.
-
-<br><br>
-<img src="./pictures/MIRA.RequirementsOverview.png" height: auto;>
-<br><br>
-
-The list of requirements can be sorted by clicking on the column headers of the overview list.
-
-You can filter the requirements by inserting filter text in the filter section. Double-clicking on a requirement opens the corresponding requirement.
-</div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/org.fortiss.af3.rcp.help/html/requirements/pictures/MIRA.RequirementsOverview.png b/org.fortiss.af3.rcp.help/html/requirements/pictures/MIRA.RequirementsOverview.png
index 7db280b88b05122c25fb093d39b8d6ebb3320dd5..62320c30c28913960beb18b86f2f9f40b2b937c8 100644
Binary files a/org.fortiss.af3.rcp.help/html/requirements/pictures/MIRA.RequirementsOverview.png and b/org.fortiss.af3.rcp.help/html/requirements/pictures/MIRA.RequirementsOverview.png differ
diff --git a/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css b/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
index 2e7b17df39efde8913e946f1859bec7a8c485ae2..98476a76ec9cca7f3494c3814d385a22f671e702 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
+++ b/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
@@ -1,22 +1,56 @@
+.box {
+ margin: 0 auto;
+ width: 800px;
+ height: 200px;
+ padding: auto;
+}
+
body {
padding: 0;
- margin: 0 auto;
+ margin: auto;
background-color: #fff;
color: #192846;
font-size: 100%;
font-weight: 500;
- text-align: center;
+ text-align: justify;
font-family: 'testfont';
+
+ }
+
+ p.ex1 {
+ padding-top: 15px;
+ padding: 0;
+ margin: auto;
+ background-color: #fff;
+ color : #3332222;
+ font-size : 100%;
+ font-weight: 500;
+ text-align : justify;
+ font-family: 'testfont';
+ padding-bottom: 15px;
}
+ IMG.displayed {
+
+ align:center;
+ width:800px;
+ height:auto;
+ max-height:100%;
+ padding: 0;
+ border: 10px solid transparent;
+
+
+
+ }
+
@font-face {
font-family: testfont;
src: url("fonts/MuseoSans_500.otf");
}
.navbar {
overflow: hidden;
- background-color:#004ea8;
-
+ background-color:#004ea8;
+
}
.navbar a {
@@ -32,7 +66,6 @@ body {
.subnav {
float: left;
overflow: hidden;
-
}
.subnav .subnavbtn {
@@ -41,7 +74,7 @@ body {
outline: none;
color: none;
padding: 14px 16px;
- background-color: none;
+ background-color: lightblue;
font-family: inherit;
margin: 0;
@@ -56,31 +89,7 @@ body {
background-color: none;
}
-.subnav-content {
- display: none;
- position: absolute;
- left: 0;
- background-color: none;
- width: 100%;
- z-index: 1;
-}
-
-.subnav-content a {
- float: left;
- color: black;
- text-decoration: none;
-}
-
-.subnav-content a:hover {
- background-color: green;
- color: black;
- position:relative;
-
-}
-.subnav:hover .subnav-content {
- display: block;
-}
/*======================================================================================*/
/* Content formats
@@ -91,14 +100,17 @@ h1 {
font-size: 2.8rem;
font-weight: 500;
line-height: 120%;
- margin: 0 0 40px 0; }
+ margin: 0 0 40px 0;
+ text-align: center;}
h2 {
color: #192846;
font-size: 2.4rem;
font-weight: 500;
line-height: 120%;
- margin: 0 0 20px 0; }
+ margin: 0 0 20px 0;
+ text-align: center;
+ }
h3 {
color: #192846;
@@ -120,16 +132,6 @@ h4 {
background-color: #333;
}
-.topnav a {
- float: left;
- display: block;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 16px;
- text-decoration: none;
- font-size: 17px;
-}
-
.active {
background-color: #4CAF50;
color: white;
@@ -204,11 +206,7 @@ h4 {
float: right;
}
-.img {
- max-width:100%;
- height:auto;
- max-height:100%;
- }
+
/* Hyperlinks */
a{
@@ -227,4 +225,23 @@ h4 {
font-family: Lucida Sans Typewriter,Lucida Console,monaco,Bitstream Vera Sans Mono,monospace;
}
-
\ No newline at end of file
+/* up button */
+ #myBtn {
+ display: none;
+ position: fixed;
+ bottom: 20px;
+ right: 30px;
+ z-index: 99;
+ font-size: 18px;
+ border: none;
+ outline: none;
+ background-color: #004ea8;
+ color: white;
+ cursor: pointer;
+ padding: 15px;
+ border-radius: 4px;
+}
+
+#myBtn:hover {
+ background-color: #555;
+}