joplin-notes/joplin notion extension/Web Development/CSS/Snippets/Questions with answers ui.md

Questions with answers ui

```html
<div className="ShowQuizMain">
      <div className="ShowQuizSection">
        <div className="extraButtonsSection">
          <div className="expandAll">
            <button>Expand All</button>
          </div>
          <div className="collapseAll">
            <button>Collapse All</button>
          </div>
        </div>
        <div className="QuestionBox">
          <div className="headerSection">
            <div className="col1">
              <h4 className="technologyText"> Technology : Java</h4>
            </div>
            <div className="col2">
              <div className="update">
                <button title="edit">
                  <i class="fas fa-edit"></i>
                </button>
              </div>

              <div className="delete">
                <button title="delete">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
          <div className="QuestionBox_Question">
            <div className="QuestionBox_Question_Text">
              1. What is Java? What is Java? What is Java? What is Java? What is
              Java? What is Java? What is Java? What is Java? What is Java? What
              is Java? What is Java? What is Java? What is Java?
            </div>
            <button className="toggleAnsBtn">
              <i className="arrow up"></i>
            </button>
          </div>
          <div className="QuestionBox_Options_Container">
            <div className="QuestionBox_Options visible">
              <div className="QuestionBox_Options_Option">
                a. Java is object oriented language
              </div>
              <div className="QuestionBox_Options_Option correct">
                b. Java is not an object oriented language
              </div>

              <div className="QuestionBox_Options_Option">
                c. Java is annoying
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
```

```scss
@import "../config";

@import "./Arrows";
.ShowQuizMain {
  padding-top: 20px;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  background-color: $dimwhite;
  min-height: 500px;

  .ShowQuizSection {
    width: 70%;
    padding: 0 0.5rem;
    min-width: 500px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow

    .extraButtonsSection {
      width: 100%;
      padding: 1rem;
      display: flex;
      justify-content: flex-end;

      .expandAll,
      .collapseAll {
        margin: 0 1rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow

        button {
          cursor: pointer;
          padding: 0.5rem 1rem;
          border: none;
          border: 1px solid black;
          border-radius: 3px;
          background-color: transparent;

          &:hover {
            background-color: $dimwhite;
          }
        }
      }
    }
  }

  .ShowQuizSection .QuestionBox {
    // overflow: hidden;
    margin: 1rem auto;
    // padding-top: 2rem;
    width: 70%;

    .headerSection {
      display: flex;
      border-top: 1px solid black;
      background-color: whitesmoke;

      .technologyText {
        padding: 0.1rem;
        margin: 0;
      }

      .update button,
      .delete button {
        background-color: rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        padding: 0.3rem;
        font-size: 1rem;
        transition: all 0.1s ease-in-out;
      }

      .delete button:hover {
        background-color: $delete-btn-hover;
      }

      .update button:hover {
        background-color: $edit-btn-hover;
      }

      .update {
        margin-right: 0.2rem;
      }

      .col1,
      .col2 {
        width: 50%;
        display: flex;
        align-items: center;
      }
      .col2 {
        justify-content: flex-end;
      }
    }

    &_Question {
      position: relative;
      // background-color: $navColor;
      border: 1px solid $dimwhite;
      background-color: white;
      border-radius: 5px;
      padding: 0.5rem 1rem;
      padding-right: 2rem;
      // color: white;
      color: black;
      line-height: 1.5rem;

      .toggleAnsBtn {
        position: absolute;
        right: 10px;
        bottom: 15px;

        transform: scale(1.2);

        padding: 0 4px;

        // color: white;
        color: black;
        border: none;
        // background-color: rgba($color: white, $alpha: 0.1);
        background-color: rgba($color: black, $alpha: 0.1);
        // background-color: transparent;
        border-radius: 50%;
        cursor: pointer;
      }
    }

    &_Options_Container {
      overflow: hidden;
    }

    &_Options {
      // width: 99%;
      margin: 0 auto;
      //   box-sizing: border-box;
      transform: translateY(-100%);
      transition: all 0.3s ease-in-out;

      padding: 0.5rem 0rem;
      // color: white;
      color: black;
      // background-color: $dimwhite;
      background-color: $options-bg-color;

      &_Option {
        background-color: $wrong-ans-color;
        padding: 0.75rem;
        margin: 0.5rem;
        border-radius: 5px;

        &.correct {
          background-color: $correct-ans-color;
        }
      }

      &.visible {
        transform: translateY(0%);
        transition: all 0.3s ease-in-out;
      }
    }
  }
}


// config.scss 
$navColor: rgba(20, 20, 20, 0.9);
$dimwhite: rgb(220, 220, 220);
$wrong-ans-color: rgba(#ba0021, 0.3);
$correct-ans-color: rgba(green, 0.3);
$options-bg-color: rgba(
  $color: grey,
  $alpha: 0.2,
);

$delete-btn-hover: rgba(red, 0.3);
$edit-btn-hover: rgba(blue, 0.3);

```