Java scriptでボックスを使う方法

Java Scriptで使った文字をボックスで囲いたいのですがどのようにしたらうまくボックスの中に入りますか？この場合だと　jsの'Who is the most populer rapper in 2020?'の部分になります。

html
1<!doctype html>
2<html class="no-js" lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>RAPPER</title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  
10
11
12  <link rel="apple-touch-icon" href="icon.png"> 
13  <!-- Place favicon.ico in the root directory -->
14  
15  <link rel="stylesheet" href="style.css" >
16  
17  <meta name="theme-color" content="#fafafa">
18</head>
19
20<body>
21  
22  <div class="container">
23    
24    <div class="jumbotron mt-5">
25      <div class="d-flex justify-content-center">
26        <div id="js-question" class="alert alert-primary" role="alert">
27          A simple primary alert—check it out!
28        </div>
29      </div>
30      
31      <div id="js-items" class="d-flex justify-content-center">
32        <div class="m-2">
33          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
34        </div>
35        <div class="m-2">
36          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
37        </div>
38        <div class="m-2">
39          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
40        </div>
41        <div class="m-2">
42          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
43        </div>
44      </div>
45    </div>
46  </div>
47  
48  <script src="app.js"></script>
49
50
51
52</div>
53
54
55
56<div class="gradient-border" id="box"></div>
57
58
59
60
61
62</body>
63
64</html>

css
1body {
2  text-align:center;
3  margin-top:100px;
4
5}
6
7
8.box13 {
9  padding: 0.5em 1em;
10  margin: 2em 0;
11  color: #FFF;
12  background: #6eb7ff;
13  border-bottom: solid 6px #3f87ce;
14  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
15  border-radius: 9px;
16}
17
18/*boxxxxxxxxxxxxxxxxx     ↓*/
19@import url('https://fonts.googleapis.com/css?family=Raleway:200');
20
21html, body {
22  height: 100%;
23}
24body {
25  display: flex;
26  justify-content: center;
27  align-items: center;
28  height: 100%;
29  background: #1D1F20;
30}
31#box {
32  display: flex;
33  align-items: center;
34  justify-content: center;
35  width: 400px;
36  height: 200px;
37  color: white;
38  font-family: 'Raleway';
39  font-size: 2.5rem;
40}
41.gradient-border {
42  --borderWidth: 3px;
43  background: #1D1F20;
44  position: relative;
45  border-radius: var(--borderWidth);
46  text-align:center;
47}
48.gradient-border:after {
49  content: '';
50  position: absolute;
51  top: calc(-1 * var(--borderWidth));
52  left: calc(-1 * var(--borderWidth));
53  height: calc(100% + var(--borderWidth) * 2);
54  width: calc(100% + var(--borderWidth) * 2);
55  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
56  border-radius: calc(2 * var(--borderWidth));
57  z-index: -1;
58  animation: animatedgradient 3s ease alternate infinite;
59  background-size: 300% 300%;
60}
61
62
63@keyframes animatedgradient {
64	0% {
65		background-position: 0% 50%;
66	}
67	50% {
68		background-position: 100% 50%;
69	}
70	100% {
71		background-position: 0% 50%;
72	}
73}
74/*boxxxxxxxxxxxxxxxxx*     ↑*/ 
75
76

js
1const quiz = [
2  {
3    question: 'Who is the most populer rapper in 2020?',
4    answers: [
5      'Kanye West',
6      'Drake',
7      'Nicki Minaj',
8      'Jay-Z'
9    ],
10    correct:'Jay-Z'
11  },{
12    question: 'Who is the most populer rapper in 2020?',
13    answers: [
14      'Kanye West',
15      'Drake',
16      'Nicki Minaj',
17      'Jay-Z'
18    ],
19    correct:'Jay-Z'
20  },{
21    question: 'Who is the most populer rapper in 2020?',
22    answers: [
23      'Kanye West',
24      'Drake',
25      'Nicki Minaj',
26      'Jay-Z'
27    ],
28  },{
29    correct:'Jay-Z'
30  }
31];
32
33const question = 'Who is the most populer rapper in 2020?';
34
35const answers = [
36  'Kanye West',
37  'Drake',
38  'Nicki Minaj',
39  'Jay-Z'
40];
41
42const correct = 'Jay-Z';
43
44const $button = document.getElementsByTagName('button');
45const buttonLength = $button.length;
46//クイズの問題文、選択肢を定義
47const setupQuiz = () => {
48  document.getElementById('js-question').textContent = question;
49let buttonIndex=0;
50
51while (buttonIndex <buttonLength) {
52 $button[buttonIndex].textContent = answers[buttonIndex];
53  buttonIndex++;
54}
55}
56
57setupQuiz();
58
59const clickHandler = (e) => { 
60  if(correct === e.target.textContent){
61    window.alert('正解！');
62   } else {
63    window.alert('不正解！');
64   }
65 };
66
67
68//ボタンをクリックしたら不正解判定
69let handlerIndex =0;
70
71while (handlerIndex < buttonLength) {
72 $button[handlerIndex].addEventListener('click',(e) => {
73   clickHandler(e);
74 });
75  handlerIndex++;
76}
77
78
79

行動規範の内容に同意します

回答1件

ベストアンサー

「ボックス」というのが「divなどのHTML要素」なのか「線で囲われた見た目」のことなのかわかりかねますが、コードから察するに後者ではないかと思い回答します。

見た目をいじるにはCSSを使います。
今回は'js-question'というidの要素に1pxの青い線で囲いをつけてみます（borderといいます）。
style.cssの中身が不明なのでアレですが、これだけだとborderと中身が近すぎるので、隙間を空けます（paddingといいます）。
もし要らなければpadding: .25rem .5rem;の行を削除してください。

html
1<!doctype html>
2<html class="no-js" lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>RAPPER</title>
7  <!-- 省略 -->
8  
9  <style>
10    #js-question {
11        border: 1px solid blue;
12        padding: .25rem .5rem;
13    }
14  </style>
15</head>
16<!-- 省略 -->